Tagged: ,

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #1214040

    Hello,
    What i’m hoping to do is get my product grid layout to look like this

    Desired Outcome

    I’ve managed this so far Current Outcome

    As you can see still a way off.

    • This topic was modified 4 years, 6 months ago by LiamKenyon.
    #1214324

    Anyone any ideas?

    #1214486

    Hi,

    Thanks for the screenshots. Could you post a link to where we can see the actual element as well please?

    Best regards,
    Rikard

    #1214714

    Thanks for the response, i’ve added the urls in private section.

    #1215874

    Hi,
    Sorry for the late reply and thanks for the links, I don’t think these will be exactly the same, but with this css it is pretty close.
    Please try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:

    li.product span.woocommerce-Price-currencySymbol {
    	 display: inline !important;
    	 line-height: 15px!important
    }
    #main li.product span.price span.woocommerce-Price-amount.amount {
    	 display: block !important;
    	 line-height: 15px!important;
    }
    li.product span.price {
    	 float: right !important;
    }
    li.product div.inner_product_header_table {
    	float: left !important;
    }
    li.product span.onsale {
    	display: none !important;
    }
    #top #wrap_all li.product ins:before {
    	display: none !important;
    }
    #top li.product .product_on_sale .inner_product_header {
        padding-right: 0 !important;
    }
    li.product .inner_product_header_cell {
    	display: flex !important;
    }
    li.product h2.woocommerce-loop-product__title {
        padding-right: 20px !important;
     }

    After applying the css, Please clear your browser cache and check.
    from:
    2020-05-24_154637.png
    to:
    2020-05-24_154548.png

    Best regards,
    Mike

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