WooCommerce is a free plugin for WordPress that adds support for e-commerce to your WordPress website so you can have an online shop. Your WordPress website turns into a fully functional e-commerce website in only a few clicks.
WooCommerce Theme Development
Are you interested in buying an online WooCommerce shop but are not sure of your WooCommerce skills? Read this post on How to Build a WooCommerce Theme for a simple solution from scratch. You’ve come to the right spot.
Creating a WooCommerce Theme
There are three potential ways to incorporate WooCommerce into a theme, which are as follows: Declaring WooCommerce Support, WooCommerce Default Stylesheets, and overriding templates.
Step 1 – Declare WooCommerce Support
If you are using custom WooCommerce design overrides in your theme, you need to announce support for WooCommerce using the add_theme_support feature. WooCommerce template overrides are only enabled on topics that promote support for WooCommerce. If you do not declare support for WooCommerce in your theme, WooCommerce will presume that the theme is not compatible with WooCommerce and will use short code-based unsupported theme rendering to show the store. Declaring support for WooCommerce is simple and requires adding one function to the functions.php file of the theme.
function mytheme_add_woocommerce_support() {
add_theme_support( ‘woocommerce’ );
}
add_action( ‘after_setup_theme’,
‘mytheme_add_woocommerce_support’ ) ;
Make sure the after-setup-theme hook and not the init hook is used. Read all about this in the add theme support documentation.
Usage with Settings:
function mytheme_add_woocommerce_support() {
add_theme_support( ‘woocommerce’, array(
‘thumbnail_image_width’ => 150,
‘single_image_width’ => 300,
‘product_grid’ => array(
‘default_rows’ => 3,
‘min_rows’ => 2,
‘max_rows’ => 8,
‘default_columns’ => 4,
‘min_columns’ => 2,
‘max_columns’ => 5,
),
) );
}
add_action( ‘after_setup_theme’,
‘mytheme_add_woocommerce_support’ );
There are optional theme configurations you can set when announcing support for WooCommerce.
Thumbnail_image_width and single_image_width will set the shop’s image sizes. The user will set image sizes in the Customizer under the WooCommerce > Product Images section if these are not declared while implementing theme support.
The product_grid settings allow theme developers to customize the shop’s default, minimum, and maximum column, and row settings. Under the WooCommerce > Product Catalog segment, users can set the rows and columns in the Customizer.
Step 2—WooCommerce Default Stylesheets
WooCommerce links 3 CSS files used to style its framework pages, such as Member Region, Cart, Checkout, Product Pages, to your website. Every WooCommerce CSS rule starts with classes that are linked to the body of the page. Nothing occurs if you do not have the line below.
<body <?PHP body_class() ?>>
If your <body> website already has body classes and you cannot just erase them, move your classes to the function’s only parameter, as in this example:
<body <?Php body_class(‘Misha class_2’) ?>>
If you choose to delete or replace the default WooCommerce CSS, you can use this piece of code in your functions.php theme file.
add_action( ‘wp_enqueue_scripts’, ‘misha_remove_woo_styles’, 20 ); // priority 20 and higher
function misha_remove_woo_styles() {
wp_deregister_style( ‘woocommerce-general’ ); // the main CSS file
wp_deregister_style( ‘woocommerce-smallscreen’ ); // for max-width: 768px
wp_deregister_style( ‘woocommerce-layout’ ); // layout only
}
Also, all styles can be removed at once
add_filter( 'woocommerce_enqueue_styles', '__return_false' );
Be sure to prevent a massive number of updates, so you can take care of all obsolete templates while WooCommerce is revamped (only if the original files of these templates were altered during the update). To verify it, go to WooCommerce > System status. woocommerce.php / woocommerce_content()
Conclusion
There is much, much more to learn about WooCommerce. But, we hope you now understand the fundamentals of integrating with the WooCommerce theme and will be able to incorporate the compliant WooCommerce theme into your WordPress website quickly.
