Product Page Customization

Hello !

I want full width product photos (without margin or border) on my product page in mobile website.
Also I want to hide top bar and header in product page on mobile website How can i do it ?
I am attaching screenshots of my product page in mobile and another screenshot of desired product page from other website.

Thanks in adavance

Attachments:

You must be logged in to view attached files.

Hello,

Please add this code to the Theme Settings > Custom CSS > Mobile:

.single .main-header{
display:none;
}
.single .main-page-wrapper .container-fluid{
padding:0;
}
.single .main-page-wrapper .container-fluid .site-content{
padding:0;
}

Best Regards

After adding this code the whole page set to full width.
I only want the product pictures to be in full width not all page

Hello,

Please add this code additionally to the Theme Settings > Custom CSS > Global:

body .single-product-content:not(.product-quick-view) .woocommerce-product-gallery__wrapper {
    padding-right: 0; 
}
body .related-and-upsells,
.product-design-compact .entry-summary {
    padding:0 30px;
}

Best Regards

This works. But the buttons (For going back to category and next product button) are streched out and not showing properly also there is vertical gap between top bar and product photo as i show in screenshot. i dont want any gap

Attachments:

You must be logged in to view attached files.

Hello,

Please add this code to the Theme Settings > Custom CSS > Mobile:

body .single-breadcrumbs-wrapper div{
	padding:0 20px;
}
body .single-breadcrumbs-wrapper div .basel-back-btn {
margin-left:30px;
}

Best Regards

[Author]

Posts