Is there any way to make the products widget look better?

  • Resolved onlinemo

    (@onlinemo)


    5 years, 6 months ago

    Hi, is there any way to display products images in a larger way on my home page when the home page isn’t my shop page?

    My home page contains various content but I want to include some links to certain products too – but the products widget just displays a top to bottom list of products with small thumbnails and it doesn’t really fit the style of the page. I would prefer to have larger images featured left to right across the page in rows. Is there any way to do this?

    Many thanks in advance

Viewing 6 replies - 1 through 6 (of 6 total)

  • Please post a link to your site.

    Thread Starter onlinemo

    (@onlinemo)

    streetworkoutworld.com

    Plugin Support Steve E.a11n

    (@woosteve)

    Automattic Happiness Engineer

    Hi there,

    In order to get more control on how WooCommerce products are displayed on your home page I would suggest using the free WooCommerce Blocks plugin, This will allow you to insert products product blocks into a page and give you many options including product dimensions.

    More information on the plugin can be found here:
    https://woocommerce.com/products/woocommerce-gutenberg-products-block/

    @onlinemo
    Sorry, didn’t see the link.

    Try this custom css:

    .product_list_widget li {
  float: left;
  width: 25%;
  text-align: center;
}
.woocommerce ul.product_list_widget li img {
  width: 100% !important;
}
.woocommerce ul.product_list_widget li a {
  width: 84%;
  margin: auto;
  text-align: center;
}
@media screen and ( max-width: 768px ) {
  .product_list_widget li {
    width: 50%;
  }
}

    Custom css can be entered at:
    Dashboard > Appearance > Customize > Additional CSS

    Plugin Support AW a11n

    (@slash1andy)

    Automattic Happiness Engineer

    Hey there!

    Since this is a few weeks old and is dealing with customization, I am going to mark as resolved. A lot of people have found help in the Advanced WooCommerce group with things like this, so I would recommend checking there, or we highly recommend contacting one of the services on our Customizations page (https://woocommerce.com/customizations/)

    Thread Starter onlinemo

    (@onlinemo)

    @lorro.. thanks that has worked great for the desktop version especially. On mobiles for some reason the producy image on the left is being pushed down the page.. i think because the description of the product above it is too long. Will something like more paddinh resolve this? Thanks

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Is there any way to make the products widget look better?’ is closed to new replies.