[Support request] Woocommerce product display issue – is this related to Generatepress?

Home Forums Support [Support request] Woocommerce product display issue – is this related to Generatepress?

Home Forums Support Woocommerce product display issue – is this related to Generatepress?

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #237071
    Jacks McNamara

    Hi there – I’m not sure if this is related to Generatepress, or just a woocommerce thing, but I thought I’d check if you know if any settings in generatepress could be causing this issue:

    I am using shortcode to place individual products inside 4 columns. I’m using beaver builder, but I have also tried creating the columns through the regular wordpress text editor, and I have the same problem whether I use the pagebuilder or not.

    My goal is one product in each of 4 equally sized columns. I am using individual products (rather than calling up the category, which displays great) because my client wants to be able to drag different products around and feature different products at different times. When I insert the product shortcode (either into an html block in Beaver Builder, or into html via the usual text editor on the back-end of WP), however, the product shows up super shrunk – screenshot attached. The upper row is how it is showing up. The lower row is how I want it to look (that one is called up by category). This is the shortcode I’m using for individual products: [product id=”755″]. Do you think anything in GP could be causing this?

    here’s the html I used when adding the products through the usual WP editor:

    <div class="grid-container grid-parent">
          <div class="grid-25">
              [product id="756"]
          </div>
          <div class="grid-25">
                [product id="746"]
          </div>
    <div class="grid-25">
                [product id="755"]
          </div>
    <div class="grid-25">
                [product id="744"]
          </div>
    </div>

    Screenshot of woo commerce issue

    #237156
    Tom
    Lead Developer
    Lead Developer

    Hmm, can’t see anything wrong with your code, but the container class for the product might have a width set.

    If you can link me to the page I might be able to help with some CSS.

    #237399
    Jacks McNamara

    Ok, I temporarily made the page visible. If you go here and use the password wooweird I’ve set it up so that the first row is individual products in each of 4 columns, using this code:

    <div class="grid-container grid-parent">
          <div class="grid-25">
              [product id="756"]
          </div>
          <div class="grid-25">
                [product id="746"]
          </div>
    <div class="grid-25">
                [product id="755"]
          </div>
    <div class="grid-25">
                [product id="744"]
          </div>
    </div>

    and the second row is pulled up with woocommerce shortcode for featured products. ( [featured_products per_page=”4″ columns=”4″] ) This is how it is all supposed to look.

    I found that if I inserted the css below into my global stylesheet, it made the individual products the right size (rather than the 22.05% width they were set at), and made the products on the shop page the right size, but any products pulled up by category are enormous… groan. this is the css:

    .woocommerce ul.products li.product  {width:100%;
    }	
    .woocommerce-page ul.products li.product {
    float: left;
    width: 22.05%
    }
    

    oh the bafflingness of woocommerce.

    #237423
    Tom
    Lead Developer
    Lead Developer

    This looks like it’s happening because your items are wrapped in a woocommerce class.

    So WooCommerce sets the normal styling trying to put the items in columns.

    You can overwrite this with this CSS:

    .grid-25 .woocommerce ul.products li.product {
        float: none;
        width: 100%;
        margin: 0 0 1.5em;
    }
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.