Archived topic

Conflict GP vs Elementor using Woocommerce Shortcode

3 replies · Started by Michael on January 7, 2020

Viewing posts 1–4 of 4

January 7, 2020 at 10:48 pm #1125280

I'm using a Woocommerce shortcode [recent_products limit="4" orderby="menu_order" order="ASC" columns="4"] on the homepage and displays fine on desktop.

But there is some sort of conflict where putting the shortcode in an Elementor html module makes the products display in one column on mobile, rather than the two columns they would usually display in mobile when using only on a GP (no builder) page.

Is there any way to resolve the conflict using the Elementor html module?

January 8, 2020 at 6:23 am #1125543

Hi there,

you have this CSS in your child theme style sheet which is forcing woo columns to single on mobile devices:

@media (max-width: 500px) {

    .woocommerce ul.products[class*=columns-] li.product,
    .woocommerce-page ul.products[class*=columns-] li.product {
        width: 100%;
    }
}

January 8, 2020 at 11:41 am #1126045

Thanks David!

January 8, 2020 at 1:45 pm #1126129

You're welcome

This archived topic is closed to new replies.

Start building better websites today.