Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #24494

    I want to show product category thumbnail on the homepage. I’ve created a new Page with woocommerce shortcode [product_categories number=""] and then used “Frontpage” Template Builder to add “Post/Page Content” element.

    Now, this works fine however by default it shows categories in 4 columns and two rows. I have only 5 product categories and want to show it in one row as opposed to two rows.

    I did try to play around with the CSS however I couldn’t get the category thumbnails to show in one row and 5 columns. Would appreciate if you’d provide some help to solve the issue.

    #123623

    Any update on this? Thanks!

    #123624

    Hi!

    Please try following shortcode:

    [product_categories number="" columns="5"]

    Best regards,

    Peter

    #123625

    Hi Peter,

    Thanks for taking a look into this issue.

    Using that shortcode now makes it 3 columns instead of 5.

    Since the theme uses responsive layout even if the thumbnail size of image is big it should probably automatically resize the images and render it in the number of columns stated.

    However, there’s something about this shortcode that does not follow the number of columns specified.

    #123626

    The workaround that I am using for this right now is by using the Logo/Partner List element from the theme builder. In place of logo image I have uploaded Category Images and then Linked the images to Category page links.

    However, I couldn’t get any hover or pop out effect when mouse hovers over the image to work. Like how when you hover over product listing it pops out.

    Is there any way to achieve similar hover effect on Logo/Partner List element?

    #123627

    Ok, I think I found the problem. The shortcode does not add a class to the product grid which would help the theme to determine the number of the columns. Try to insert following code into the quick css field

    div .fivecolumns .products .product {
    width: 16.5%;
    }

    Then wrap a div with the class fivecolumns around your shortcode like:

    <div class="fivecolumns">
    [product_categories number="" columns="5"]
    </div>

    Don’t forget to switch to the html mode first – otherwise wp will convert the div tags to text.

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

The topic ‘Product Category Thumbnail Styling on HomePage’ is closed to new replies.