{"id":26,"date":"2025-09-26T08:50:47","date_gmt":"2025-09-26T08:50:47","guid":{"rendered":"https:\/\/ska-blocks.com\/docs\/2025\/09\/26\/woocommerce\/"},"modified":"2025-09-26T09:44:21","modified_gmt":"2025-09-26T09:44:21","slug":"woocommerce","status":"publish","type":"post","link":"https:\/\/ska-blocks.com\/docs\/woocommerce\/","title":{"rendered":"WooCommerce"},"content":{"rendered":"\n

WooCommerce remains as one of the easiest and most customizable solutions for running an e-commerce store. ska-theme includes support for the WooCommerce plugin<\/a>.<\/p>\n\n\n\n

Once you’ve installed and activated the plugin, take a look at the theme options’ WooCommerce section, which allows to configure how many products to display per page, how to render the product gallery, what size images to use and lots of presets<\/a> that pertain to WooCommerce content.<\/p>\n\n\n\n

Along with basic WC support, there are some additional features to enhance your store.<\/p>\n\n\n\n

Variation swatches<\/h2>\n\n\n\n

Enabling the Variation swatches option allows to display product variations as color swatches or buttons, rather than a basic select.<\/p>\n\n\n\n

Once enabled, when navigating to Products -> Attributes<\/strong> and editing a product attribute, you’ll be able to select its’ type:<\/p>\n\n\n\n<\/a>\n\n\n\n

When the type is “color”, you’ll be able to select a color when editing product attribute terms:<\/p>\n\n\n\n<\/a>\n\n\n\n

The color picker input accepts any value suitable for CSS background rule, such as:<\/p>\n\n\n\n

linear-gradient(135deg, #ffffff 0%, #ffffff 50%, #000000 50%, #000000 100%)<\/code><\/pre>\n\n\n\n
for multiple colors, or:<\/p>\n\n\n\n
url(https:\/\/example.com\/path\/to\/image.png)<\/code><\/pre>\n\n\n\n
for images.<\/p>\n\n\n\n
Variations in loop<\/h2>\n\n\n\n
When enabling this option it will be possible to choose product variations on product archive pages, instead of just single product page.<\/p>\n\n\n\n
Additional tabs<\/h2>\n\n\n\n
With this option you can add additional tabs to the single product page:<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
When editing a product the tabs will show up as similar fields to product short description. On the front end the tabs are added to the accordion when it has any content.<\/p>\n\n\n\n
Usage with WPML<\/h3>\n\n\n\n
If you’re using The WordPress Multilingual Plugin<\/a> for a multilingual site, you need to enable translation for the tabs from WPML -> Settings -> Custom Fields Translation<\/strong> by enabling the “Translate” option for ska_wc_{tab-key}<\/code> fields. After adding new tabs, first you need to edit a product and save it for the custom field options to show up in WPML settings.<\/p>\n\n\n\n
Translate the tab titles from WPML -> String Translation -> In domain: ska-theme<\/strong>.<\/p>\n\n\n\n
Extra thumbnails<\/h2>\n\n\n\n
Displays second product image when hovering over a product image in the loop.<\/p>\n\n\n\n
\n\n\n\n
Cart<\/h2>\n\n\n\n
If you’ve installed WC and you go the edit the Cart page and it has WooCommerce blocks:<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
hit the Switch to classic<\/strong> cart button in the right sidebar when the Cart block is selected:<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
The theme is designed for classic cart.<\/p>\n\n\n\n
Classic cart can also be rendered with the shortcode:<\/p>\n\n\n\n
[woocommerce_cart]<\/code><\/pre>\n\n\n\n
Checkout<\/h2>\n\n\n\n
Same goes for the checkout page, if it’s using blocks, you’ll probably want to switch to the classic checkout from the right sidebar:<\/p>\n\n\n\n<\/a>\n\n\n\n
The theme is designed for classic checkout.<\/p>\n\n\n\n
Classic checkout can also be rendered with the shortcode:<\/p>\n\n\n\n
[woocommerce_checkout]<\/code><\/pre>\n\n\n\n
My account<\/h2>\n\n\n\n
The WooCommerce My account page should just contain the shortcode:<\/p>\n\n\n\n
[woocommerce_my_account]<\/code><\/pre>\n\n\n\n
Image sizes<\/h2>\n\n\n\n
WooCommerce section in ska-theme options includes controls to change the various WC product image sizes:<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
After changing these settings, you should go to WooCommerce -> Status -> Tools<\/strong> and run the Regenerate shop thumbnails<\/strong> tool.<\/p>\n\n\n\n
In the Loop product<\/strong> preset you’ll also be able to change the --product-image-aspect-ratio<\/code> CSS variable which ensures a consistent aspect ratio of images in product loops whether you selected a fixed size at “Product catalog thumbnail size” or not.<\/p>\n\n\n\n
Product categories list block<\/h2>\n\n\n\n
Example WooCommerce Product Categories List<\/strong> block styled with Tailwind classes:<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n
\n
\n
<\/div>\n<\/div>\n
\n\t