How to display Woocommerce related products in 2 columns for mobile devices

  • Resolved rt32kd

    (@rt32kd)


    2 years, 6 months ago

    For mobile devices only, I am trying to display Related Products across 2 columns rather than 1.

    So far I have tried the following code snippet which seems to create space for another column, but the products are only appearing on the left column. The right side is empty.

      @media screen and (max-width: 767px){

   .related.products ul.products li.product {
    flex: 0 1 auto;
    width: 40%;

  }
}

    Any help is appreciated.

    Note, I am also using Beaver Builder (similar to Elementor) if that helps but I don’t think that would have any impact on the CSS required.

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

  • Hi @rt32kd

    Thanks for reaching out!

    I understand that you would like to display the Related Products in two columns when your site is viewed on mobile devices.

    What you want to achieve would require customization to do it. Since custom coding is outside our scope of support, I am leaving this thread open for a bit to see if anyone can chime in to help you out.

    We have our developer resources portal that can help you get going, so I would recommend you to check it further from the WooCommerce Developer Resources Portal.

    You can also visit the WooCommerce Community Forum, the WooCommerce FB group, or the #developers channel of our Community Slack. We’re lucky to have a great community of open-source developers for WooCommerce, and many of our developers hang out there, too.

    Another option is to check our customizations page to hire an expert that can create a custom solution for you: https://woocommerce.com/experts/

    Can we see your website? Would need to check the CSS etc on the page.

    This sort of thing can also vary depending on your theme.

    Have a look in Appearance – Customise

    I use GeneratePress and there is a setting in the Layout section to change the product columns

    Thread Starter rt32kd

    (@rt32kd)

    Hi there,

    The link is here under Sleep Essentials.

    Just to reiterate, the issue is on mobile. If you reduce the screen width, you can see that the CSS above squashes the recommended products to the left but doesn’t stack in 2 columns.

    Thank you!

    • This reply was modified 2 years, 6 months ago by rt32kd.

    Hi @rt32kd ??

    The link is here under Sleep Essentials.

    It appears that the neither the products under Sleep Essentials, nor the Test Product that the provided link is linking to, have any related products on display -in order to try and troubleshoot the issue further.

    Linked below is a screenshot with what I’m able to see on my end:
    https://snipboard.io/9JVZFh.jpg

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘How to display Woocommerce related products in 2 columns for mobile devices’ is closed to new replies.

Tags