Product Descriptions on Category Pages

Whenever I use the woocommerce shortcode [products columns=1], the description of the product shows under the picture. How do I get the description to show beside the picture?

Hi there,

Thanks for writing in.

The Woocommerce shortcode uses their own layout, would you mind providing a sample URL? Maybe a bit of CSS may fix it, else, you may need to consult it with a Woocommerce developer.

Thanks!

I’ll add an URL in a secure note. This is a category page

Hi there,

Thank you for providing the information. That is the default view of the theme when used a 1 column listing including the Woocommerce shortcode. If you wish to have the description next to the image you will need to go to the page that you used the Woocommerce shortcode and add wooprod class on the Body Class option:

Then add the CSS code below to X > Launch > Options > CSS:

article.page {
    display: flex;
    flex-flow: row wrap;
}

article.page .entry-featured {
    max-width: 40%;
    flex: 1 1 100%;
}

article.page > .entry-wrap {
    max-width: 60%;
    flex: 1 1 100%;
}

Also, not related to the question but you are using an old version of teh Cornerstone which is not compatible with the version of the theme you have installed. Please update the Cornerstone to version 2.1.7

Thank you.

Hello. This looks great for that specific page, but when I try it on another page it doesn’t format correctly. Please tell me how to do it on the page included in this next note. Thank you

Hi There,

Please update the code given by Christopher and use this:

.woocommerce.columns-1 .product .entry-product,
article.page {
    display: flex;
    flex-flow: row wrap;
}

.woocommerce.columns-1 .product .entry-product .entry-featured,
article.page .entry-featured {
    max-width: 40%;
    flex: 1 1 100%;
}

.woocommerce.columns-1 .product .entry-product > .entry-wrap,
article.page > .entry-wrap {
    max-width: 60%;
    flex: 1 1 100%;
} 

Please let us know how it goes.

For the most part this looks great - thanks for that. How can I center this? Right now the column is shifted to the left hand side of the website. Thanks

Hey @65kmanspt,

Please add this to your CSS

.woocommerce.columns-1 .product .entry-product, article.page {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
}

Hope that helps.

How can we make this look better on mobile? It’s almost unreadable on there. Looks good on desktop. Thanks

Try adding this code.

@media (max-width: 480px) {
    .woocommerce.columns-1 .product .entry-product > .entry-wrap, article.page > .entry-wrap {
        max-width: 100% !important;
    }
}

Regretfully, we cannot go further with giving CSS for this case as this is getting into custom development which is outside the scope of our support.

If you need more styling, please consider using the Essential Grid or The Grid plugin which can display WooCommerce product listing also.

Thank you for understanding.

I understand - thank you for the help

You’re welcome.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.