Single Product Page Design Issue

Please let me if it possible to achieve exact same layout like Seller template (Single Product Page)

Hi there,

Seller uses this CSS:

.woocommerce ul.products li.product a img,
.woocommerce div.product div.images img{
	padding: 3px;
	border: 1px solid rgba(0,0,0,0.1);
	box-sizing: border-box;
}

This will apply to the shop pages.
If you want it only on the Single Product then use this:

.woocommerce.single div.product div.images img{
	padding: 3px;
	border: 1px solid rgba(0,0,0,0.1);
	box-sizing: border-box;
}

Hello David

Thanks for your help.

The CSS is working fine in Mobile view only (not in Desktop)

And not only this time, CSS provided by GP team is only working in MObile site.

Please check if anything wrong from my side.

and also let me know how can i resolve this

Ritesh

That CSS is not specific to any device size, the issue you have is you have added CSS within an @media query and have left out a closing bracket. @meida queries should look like this with the missing closing bracket highlighted:

@media(max-width: 769px) {
    .element {
       /* some styles */
    }
} <---- you are missing this bracket 

Thank David For Help

I tried your solution and solved the issue.

There is something yet to be fixed.. (seems i did lots of CSS issues :((

1] The Add to cart and Buy Buttons are not appearing in the proper size, may be a Padding issue
https://prnt.sc/19o255u
------------------------------------------
2] And There is sticky Add to cart message but the button add to cart is not clickable (https://prnt.sc/19o163n)
Suggest me to remove it

Hi there,

For #1:

Try adding this CSS:

#wc-column-container ul.products li.product {
    flex-direction: column;
}

a.button.product_type_simple.add_to_cart_button.ajax_add_to_cart {
    height: auto;
    margin-top: auto !important;
    flex: 0 !important;
}

a.woocommerce-LoopProduct-link.woocommerce-loop-product__link {
    margin-bottom: 1em !important;
}

for #2)

Try adding this CSS:

@media (max-width: 768px) {
.add-to-cart-panel {
    pointer-events: unset !important;
}
}

Thanks for this support.

The issue is resolved now

Thanks a ton

Ritesh

Nice one. No problem. :D