[Resolved] Woocommerce shortcode Products don´t show OK for tablet&mobile

Home Forums Support Woocommerce shortcode Products don´t show OK for tablet&mobile

Viewing 15 posts - 1 through 15 (of 31 total)
  • Author
    Posts
  • #324270
    David

    Hi Tom! Amazing extension for woocommerce!!!!

    I stopped fighting with Storefront theme 🙂 I did not think GP could be even bigger !!!! Your work is extraordinary, you give us a tool that makes our work much easier. Thanks !!!!

    I’m working on a site and I have a problem displaying the products. I have introduced a shortcode of woocommerce on one page and the desktop version looks good, but in the version for tablet and mobile products are placed on top of others.

    In this link I have a test page so you can see it:
    https://ecobasico.com/productos/

    Can you help me with this? Thanks

    GeneratePress 1.3.46
    #324293
    Tom
    Lead Developer
    Lead Developer

    Glad you like it!

    Here’s what I see: https://www.screencast.com/t/Af3Nbr4vU

    Maybe try clearing your browser cache?

    #324336
    David

    I’ve cahed my web, but it´s not resolved.

    This as it seems to me on an iphone5c: http://www.screencast.com/t/MqVhMKY4JCVZ

    #324507
    Tom
    Lead Developer
    Lead Developer

    It looks like you might just not have enough room for two columns on mobile. We could try reducing the button size on mobile for you if you’d like?

    #324526
    David

    Ok Tom, it’s strange because when the products are displayed in the SHOP it does the responsive as I have it set up in the customizer. (4 columns for desktop and one colum for mobile and tablet OK too)

    It´s only appears to me when inserting the shortcode of woocommerce that I want to use to make the design of the homepage and show featured products.

    We can tell you in the same way that in the Shop leave 4 columns for desktop version and one colum for mobile version?

    Thanks for your support!

    #324698
    Tom
    Lead Developer
    Lead Developer

    Using a shortcode will make it so the columns use whatever setting you have in the shortcode attributes. On mobile, it SHOULD use the GP mobile column settings.

    #324751
    David

    So how can this be fixed?

    Do I need to indicate any css rule to shorcode?

    #324761
    Tom
    Lead Developer
    Lead Developer

    You could:

    a) Set your mobile product columns to 1.
    b) Use CSS to make your buttons smaller on mobile.

    Let me know if you need help with b 🙂

    #324784
    David

    Sorry Tom, but:

    I have already selected one column for mobile: https://www.screencast.com/t/Kcm39yjbSD

    In that way for tablet: https://www.screencast.com/t/sKns08PvZpKZ

    And for desktop is ok: https://www.screencast.com/t/nRZPDYUPneIX

    #324927
    Tom
    Lead Developer
    Lead Developer

    That’s strange you’re still seeing it like that – the screenshot you posted above doesn’t look like that? I can’t get it to look like that either on my side.

    You can force them to be one column like this:

    @media (max-width: 768px) {
        .woocommerce ul.products li.product,
        .woocommerce[class*=columns-] ul.products li.product {
            width: 100%;
            float: none;
            margin: 0;
        }
    }
    #325415
    David

    Hi Tom, first thank you for helping me on Saturday 🙂

    Yesterday I did a local installation and … the problem was still there. (Even with the shortcode you indicated to me).

    Then disable GP and activate the theme Twenty Twelve and … still giving the problem!:

    http://www.screencast.com/t/qT1DSw13Fe

    Then I activated Storefront theme and the shortcode worked correctly!:
    (In this topic in templates there is a home page option for the store.)

    http://www.screencast.com/t/0bJc8HteV

    I’m going to get in touch with Woocommerce support to find out if anyone has commented on this problem.

    Meanwhile and to use GP, can you think of any idea to include the featured products on the cover?

    With WP ShowPost I tried it and it works responsive correctly but I can not get the buttons …

    Any idea? Thanks!

    #325466
    Daniel

    I’ve the same problem with Woocommerce shortcodes.

    As you say, it seems to be a problem with the shortcode itself because changing the theme doesn’t solve it (I haven’t tested Storefront).

    Anyway, if you find a solution please, share it here.

    #325544
    Daniel

    Hi again!

    I’ve been testing this issue and I think the problem is woth the GP Premium woocommerce css.

    For a 768 pixels max-width it uses this css:

    .woocommerce .wc-columns-4 ul.products li.product, .woocommerce-page .wc-columns-4 ul.products li.product, .woocommerce-page.columns-4 ul.products li.product, .woocommerce.columns-4 ul.products li.product {
    width: 21.2%;
    }

    which is overwriting this other woocommerce css:

    media=”only screen and (max-width: 768px)”
    .woocommerce ul.products li.product, .woocommerce-page ul.products li.product, .woocommerce-page[class*=columns-] ul.products li.product, .woocommerce[class*=columns-] ul.products li.product {
    width: 48%;
    float: left;
    clear: both;
    margin: 0 0 2.992em;
    }

    #325597
    David
    Staff
    Customer Support

    I found woocommerce shortcodes to be a major problem, unless your using Storefront and even then any changes to the product CSS causes grief, products not aligning in particular – there are loads of issues reported across most major themes. I invested in Elementor so i could place custom shop pages which doesn’t have the issues the shortcodes do. However GP Woo add-on and Elementor did conflict in mobile view. Because both GP and Elementor use their own wrappers for the products the GP woo customiser would effectively rescale the Elementor wrapper as well as the products so you end up with 2 quarter size columns. Issue was resolved with the below CSS setting the default to 1 column and then the GP customiser works perfectly. Kudos to Tom in providing the base code and explaining to me about the 2 wrappers.

    @media (max-width: 768px) {
        .woocommerce ul.products li.product, 
        .woocommerce-page ul.products li.product, 
        .woocommerce-page[class*=columns-] ul.products li.product,
        .woocommerce[class*=columns-] ul.products li.product {
            width: 100%;
            float: left;
            clear: both;
            margin: 0 1% 2.992em;
        }
    }
    #325953
    Tom
    Lead Developer
    Lead Developer

    I’ll definitely look in to improving this.

Viewing 15 posts - 1 through 15 (of 31 total)
  • You must be logged in to reply to this topic.