How to Customize Default WooCommerce Product Page with Code Only:
- Install the necessary plugins (WooCommerce, WPcode, YITH).
- Add products using .csv file if not added already.
- Replace “Add to cart” with “Add to quote” button with YITH.
- Customize the image section.
- Customize the product info and CTA section.
- Customize the table.
Here is the raw code -
WooCommerce - Product - Image Section (CSS)
/* Display the image gallery and thumbnails side-by-side (horizontally) */
.woocommerce-product-gallery {
display: flex;
column-gap: 14px;
margin: 0 !important;
}
/* Make the image gallery take around 80% of total width */
.woocommerce-product-gallery .flex-viewport {
flex-basis: 82%;
margin: 0 !important;
}
/* Make the thumnail image container take around 20% of total width and customize its design */
.flex-control-thumbs {
flex-basis: 18%;
z-index: 2;
height: 385px !important;
padding: 10px !important;
margin: auto 0 !important;
}
/* Customize the gallery image */
.woocommerce-product-gallery__image img {
border-radius: 8px;
object-fit: cover;
}
/* Adjust position of the full-size image trigger button */
.woocommerce-product-gallery__trigger {
right: 4.5em !important;
}
/* Adjust the width and spaces of individual thumbnail image containers and add transition for sliding effect */
.flex-control-thumbs li {
min-width: 100%;
margin-bottom: 10px !important;
transition: margin-top 0.4s linear;
}
/* Make the thumbnail images' corners a bit rounded to match brand design */
.flex-control-thumbs li img {
border-radius: 6px;
}
/* Add borders to the active thumbnail image for clear indication */
.flex-active {
border: 2px solid #4338ca;
}
WooCommerce - Product - Info and CTA Section (CSS)
/* Increase font weight of breadcrumb texts */
.woocommerce-breadcrumb {
font-weight: 500;
}
/* Hightlight the links in breadcrumb for design purpose */
.woocommerce-breadcrumb a {
color: #4338CA !important;
}
/* Increase font weight of product title and add some space at top */
.entry-title {
font-weight: 600;
margin-top: 30px !important;
}
/* Add another border below the product meta information (SKU and categories) */
.product_meta {
border-bottom: 1px solid var(--ast-border-color);
padding-bottom: 0.5em;
}
/* Add space between short description and button sections */
.entry-summary form {
margin-top: 36px;
}
/* Customize the quantity selector */
.product .quantity input[type=number] {
padding: 8px;
border-radius: 6px;
border: 2px solid var(--ast-border-color);
}
/* Make the quantity selector always visible (not only on hover) */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
opacity: 1;
}
/* Remove unwanted top margin from the quote container */
.yith-ywraq-add-to-quote {
margin-top: 0 !important;
}
/* Decrease font-size of the text of add to quote button */
.product .add-request-quote-button {
font-size: 14px !important;
}
WooCommerce - Product - Table (CSS)
/* Increase the width of the top and left borders of the table */
.wc-tab table {
border-top: 2px solid #E0E0E0;
border-left: 2px solid #E0E0E0;
}
/* Increase the width of the bottom and right borders of each cell */
.wc-tab tr td {
border-bottom: 2px solid #E0E0E0;
border-right: 2px solid #E0E0E0;
padding: 10px;
}
/* Additional styles for the table headers to make them stand out */
.wc-tab tr td:first-child {
font-weight: 900;
width: 25%;
background-color: #F5F5FA;
}
Post a Comment