WooCommerce, a popular WordPress plugin, empowers countless online stores with its robust e-commerce capabilities. While it offers a plethora of features out of the box, sometimes, you may want to tailor your shopping cart and checkout pages to align with your unique business needs. In this blog post, we'll explore some code snippets to customize the basket and checkout pages in WooCommerce, focusing on removing cross-sells and adjusting the layout for a more polished user experience.
By default, WooCommerce displays cross-sell products in a specific position on the cart page. However, if you wish to relocate them or modify their appearance, you can use the following code snippets.
// Remove Cross Sells From Default Position
remove_action('woocommerce_cart_collaterals', 'woocommerce_cross_sell_display');
// Add them back UNDER the Cart Table
add_action('woocommerce_after_cart_table', 'woocommerce_cross_sell_display');
// Display Cross Sells on 5 columns instead of default 4
add_filter('woocommerce_cross_sells_columns', 'bbloomer_change_cross_sells_columns');
function bbloomer_change_cross_sells_columns($columns)
{
return 5;
}This code achieves two main things. First, it removes cross-sells from their default position and then places them under the cart table. Additionally, it adjusts the display of cross-sells to appear in five columns instead of the default four, providing a more visually appealing arrangement.
Another common customization involves adjusting the layout of the cart totals section. The following CSS code snippet achieves a full-width layout for the cart totals, ensuring a cleaner and more organized appearance.
/* Cart Totals */
.woocommerce .cart-collaterals .cart_totals, .woocommerce-page .cart-collaterals .cart_totals {
margin-top: 60px;
float: none;
text-align: left;
width: 100%;
}This CSS code targets the cart totals section and applies styling to remove any floating elements, set the text alignment to the left, and extend the width to 100%, ensuring it spans the entire width of the container.
Customizing your WooCommerce cart and checkout pages can greatly enhance the overall user experience and align the interface with your brand identity. The provided code snippets allow you to seamlessly remove and reposition cross-sells, as well as adjust the layout of the cart totals section. By incorporating these customizations, you can create a more polished and user-friendly shopping experience for your customers. Feel free to experiment further and tailor these snippets to suit your specific requirements. Happy customizing!