WooCommerce, the popular e-commerce plugin for WordPress, offers a solid foundation for building online stores. However, to truly tailor your store to your specific requirements and add unique functionalities, you may need to dive into code customizations.
In this article, we will explore the top 10 WooCommerce code customizations that can enhance your e-commerce store.
We’ll include detailed explanations and provide PHP code examples to help you implement these customizations effectively.
Modifying Product Price Display
Sometimes, you may want to alter the way prices are displayed in your WooCommerce store. To achieve this, you can use the woocommerce_get_price_html filter hook. Here’s an example that adds a prefix and suffix to the product price:
function custom_price_html($price, $product) {
$prefix = '$';
$suffix = ' USD';
return $prefix . $price . $suffix;
}
add_filter('woocommerce_get_price_html', 'custom_price_html', 10, 2);Customizing Add to Cart Button
To modify the Add to Cart button text or appearance, you can utilize the woocommerce_product_add_to_cart_text filter hook. Here’s an example that changes the button text to “Buy Now”:
function custom_add_to_cart_text($text) {
return 'Buy Now';
}
add_filter('woocommerce_product_add_to_cart_text', 'custom_add_to_cart_text');Adding Custom Product Tabs
If you wish to add additional tabs to the product page, you can use the woocommerce_product_tabs action hook. Here’s an example that adds a new tab called “Specifications”:
function add_custom_product_tab($tabs) {
$tabs['custom_tab'] = array(
'title' => __('Specifications', 'woocommerce'),
'priority' => 50,
'callback' => 'custom_product_tab_content'
);
return $tabs;
}
add_filter('woocommerce_product_tabs', 'add_custom_product_tab');
function custom_product_tab_content() {
echo '<h2>Specifications</h2>';
echo '<p>This is the content of the custom tab.</p>';
}Changing the Number of Products Displayed per Page
To adjust the number of products displayed on the shop page or category archives, you can use the loop_shop_per_page filter hook. Here’s an example that sets the number to 12:
function custom_products_per_page($cols) {
return 12;
}
add_filter('loop_shop_per_page', 'custom_products_per_page');Hiding Out of Stock Products
If you want to hide out of stock products from your store, you can use the woocommerce_product_query filter hook. Here’s an example that excludes out of stock products from search results:
function hide_out_of_stock_products($q) {
$q->set('meta_query', array(array(
'key' => '_stock_status',
'value' => 'outofstock',
'compare' => '!='
)));
}
add_action('woocommerce_product_query', 'hide_out_of_stock_products');Customizing the Checkout Fields
To add or modify checkout fields, you can use the woocommerce_checkout_fields filter hook. Here’s an example that adds a custom field for the billing form:
function add_custom_checkout_field($fields) {
$fields['billing']['custom_field'] = array(
'label' => __('Custom Field', 'woocommerce'),
'required' => true,
'class' => array('form-row-wide'),
'clear' => true
);
return $fields;
}
add_filter('woocommerce_checkout_fields', 'add_custom_checkout_field');Adding a Custom Checkout Field Validation
To validate the custom field added in the previous example, you can use the woocommerce_after_checkout_validation action hook. Here’s an example that checks if the field value is a valid phone number:
function validate_custom_checkout_field($fields, $errors) {
if (!preg_match('/^[0-9]{10}$/', $_POST['custom_field'])) {
$errors->add('validation', __('Please enter a valid phone number.', 'woocommerce'));
}
}
add_action('woocommerce_after_checkout_validation', 'validate_custom_checkout_field', 10, 2);
Changing the Order Confirmation Page
To customize the order confirmation page, you can override the thankyou.php template file in your theme. Here’s an example that modifies the text displayed on the order confirmation page:
function modify_thankyou_text($thankyou_text, $order) {
return 'Thank you for your order. Your order ID is ' . $order->get_order_number() . '.';
}
add_filter('woocommerce_thankyou_order_received_text', 'modify_thankyou_text', 10, 2);Adding Custom Email Notifications
To include additional information or modify the content of WooCommerce email notifications, you can use various action hooks such as woocommerce_email_header, woocommerce_email_order_details, and woocommerce_email_footer. Here’s an example that adds a custom message to the order completed email:
function add_custom_email_content($order, $sent_to_admin, $plain_text) {
echo '<p>This is a custom message added to the order completed email.</p>';
}
add_action('woocommerce_email_order_details', 'add_custom_email_content', 10, 3);Implementing Custom Shipping Methods
If you need to integrate custom shipping methods, you can extend the WC_Shipping_Method class. Here’s an example that creates a flat-rate shipping method:
class Custom_Shipping_Method extends WC_Shipping_Method {
public function __construct() {
$this->id = 'custom_shipping';
$this->method_title = __('Custom Shipping', 'woocommerce');
$this->method_description = __('Flat rate shipping', 'woocommerce');
$this->supports = array('shipping-zones', 'instance-settings');
$this->init();
}
public function calculate_shipping($package = array()) {
$this->add_rate(array(
'id' => $this->id,
'label' => $this->method_title,
'cost' => 5.00
));
}
}Conclusion
With these top 10 WooCommerce code customizations, you can take your e-commerce store to the next level by personalizing various aspects of the shopping experience.
From modifying prices and customizing buttons to adding custom tabs and implementing new shipping methods, these code customizations allow you to tailor your store according to your unique requirements.
Remember to test and backup your code before implementing these customizations, ensuring a smooth and error-free transition for your WooCommerce store.
