Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
  • #1112349

    I’ve set added a WooCommerce Product Grid using the Avia builder, and set it to 5 columns.
    The first product appears on its own. The second line contains the other 4 products.

    My product list hasn’t been rendered with the correct first/last css classes for li.product items.

    I am running on PHP 7.3, Enfold 4.5.7 and WP 5.2.2.
    In the Chrome Inspector, simply moving the DOM element with class first to the top of the ul.products list fixes the layout issue. So I suggest this is potentially an issue in the way this grid is rendered.

    Please advise.


    Hey tech,

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    #av_section_7 .shop_columns_5 .products .product.first {
      clear: none;

    If you need further assistance please let us know.
    Best regards,


    Hi Victoria,
    thank you for this quick fix.

    However it doesn’t work well. The right-margin for ‘last’ element makes the first product look inconsistent with the others. Have a look.
    Plus you’ve given me a very specific CSS rule which works only for this particular case. It is not future proof, it won’t work in other places or other column layouts (3 columns, 4 columns, etc..) and it will cause potential problems on mobile screens.

    The issue is that the rendering or the CSS of the Product Grid is not right.

    Can you escalate this issue to your developers and come back to me with an ETA please?



    Hi Clement,

    We had this issue in one of the previous versions, however, it was fixed. You might want to reupdate your theme over FTP and make sure all files get overwritten, then the issue should be gone.

    Best regards,



    I’ve done a fresh download from Themeforest and reuploaded Version: 4.5.7.
    Problem still persists.

    Please can you advise?


    Hi tech,

    Please have a look at this thread

    Best regards,


    Hi Victoria,

    Thank you. Unfortunately, this thread is relating to an older version of the theme, probably 4.4.
    And when I checked the file in question: line 299/300 in enfold/config-templatebuilder/avia-shortcodes/productslider.php:
    in Enfold v4.5.7 the corresponding file is: line 490: enfold/config-templatebuilder/avia-shortcodes/productslider/productslider.php:

    And it already contains the fixes mentioned in the thread. Namely:

    			 * @since WC 3.3.0 we have to reset WC loop counter otherwise layout might break
    			if( function_exists( 'wc_reset_loop' ) )
    			return $output;

    Please can you investigate further


    Hi tech,

    Did you delete enfold folder when you uploaded a fresh copy? If not please, do so, and then install Enfold.

    Best regards,


    Hi Victoria,

    This is what I had done.
    But for sake of being extra cautious I have deleted the folder this morning and re-uploaded a fresh copy from themeforest.

    Still the issue remains.



    Can we do changes on the backend or the site is live?

    Best regards,

    This reply has been marked as private.


    Sorry for the late reply.

    The reason for the broken layout is that you put the layerslider in a codeblock element in a section.

    Use the ALB element, or codeblock outside a section – then the output is correct – see link to testpage in private content.

    Best regards,

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