Archived topic

Change the related products section and cross-sell section to 2 columns

3 replies · Started by XISONG on December 9, 2022

Viewing posts 1–4 of 4

December 9, 2022 at 12:26 am #2455501

Hello, I used GeneratePress Pro and added the pre-made theme "Seller".

I would like to make the related products section and the cross-sell (You May Also Like...) section of the woocommerce single product page on mobile 2 columns. I have changed "Product Columns" to 2 in Customize's Layout-woocommerce.

However, the related products section and the cross-sell (You May Also Like...) section of the individual product pages of the site now still have 1 column.

I don't know if there is something I am missing, please help me to solve this problem, thanks.

December 9, 2022 at 1:48 am #2455562

Hi Sean,

Can you try adding this through Appearance > Customize > Additional CSS:

@media (max-width: 768px) {
    .single-product section.up-sells.upsells.products > ul {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }

    .single-product section.related.products > ul {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }
}

Let us know how it goes.

December 9, 2022 at 2:29 am #2455600

Hi, after I added the code, the problem is solved, thank you.

December 11, 2022 at 5:02 pm #2458331

You're welcome, Sean!

This archived topic is closed to new replies.

Start building better websites today.