How to Customize Default WooCommerce Shop 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.
- Enable “short description” for products in the shop page.
- Customize/design the shop page:
- Customize the product cards with your brand design.
- Truncate the product title by 2 lines.
- Truncate the product short description by 4 lines.
- Remove price and star ratings.
- Design “Add to Quote” button.
- Organize your code with WPcode (Code Snippets) plugin.
Here is the raw code:
WooCommerce - Shop - Add to Quote (PHP)
add_action( 'woocommerce_after_shop_loop_item', 'add_to_quote_button', 11 );
function add_to_quote_button() {
global $product;
$id = $product->get_id();
$title = $product->get_title();
$sku = $product->get_sku();
$site_url = get_site_url();
echo '<a
href="' . $site_url . '/request-quote/?add-to-quote=' . $id . '"
data-quantity="1"
class="button"
data-product_id="' . $id . '"
data-product_sku="' . $sku . '"
aria-label="Add “' . $title . '” to your quote"
aria-describedby=""
rel="nofollow"
>
Add to quote
</a>';
}
WooCommerce - Shop (CSS)
/* Customize product card */
.products .product {
background-color: #F0F0F7;
padding: 18px !important;
border-radius: 12px;
}
/* Customize product image */
.products .product img {
border-radius: 8px;
}
/* Customize product category text */
.astra-shop-summary-wrap .ast-woo-product-category {
margin-top: 5px;
font-weight: 600;
color: #1E1B4B !important;
}
/* Truncate product title by 2 lines */
.astra-shop-summary-wrap h2 {
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
margin-top: 10px !important;
font-size: 17px !important;
}
/* Truncate product description by 4 lines */
.astra-shop-summary-wrap .ast-woo-shop-product-description {
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4;
margin-bottom: 30px;
}
/* Remove the price and star ratings from product card */
.astra-shop-summary-wrap .price, .astra-shop-summary-wrap .star-rating {
display: none !important;
}
/* Adjust add to quote button width and push it at the bottom of the card */
.products .product .button {
width: fit-content;
margin-top: auto !important;
}
/* Customize sorting dropdown */
.woocommerce-ordering select {
background-color: #F5F5FA !important;
border: 3px solid #F0F0F7 !important;
border-radius: 8px !important;
}
Post a Comment