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
.
