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.
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 that pertain to WooCommerce content.
Along with basic WC support, there are some additional features to enhance your store.
Variation swatches
Enabling the Variation swatches option allows to display product variations as color swatches or buttons, rather than a basic select.
Once enabled, when navigating to Products -> Attributes and editing a product attribute, you’ll be able to select its’ type:
When the type is “color”, you’ll be able to select a color when editing product attribute terms:
The color picker input accepts any value suitable for CSS background rule, such as:
linear-gradient(135deg, #ffffff 0%, #ffffff 50%, #000000 50%, #000000 100%)for multiple colors, or:
url(https://example.com/path/to/image.png)for images.
Variations in loop
When enabling this option it will be possible to choose product variations on product archive pages, instead of just single product page.
Additional tabs
With this option you can add additional tabs to the single product page:
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.
Usage with WPML
If you’re using The WordPress Multilingual Plugin for a multilingual site, you need to enable translation for the tabs from WPML -> Settings -> Custom Fields Translation by enabling the “Translate” option for ska_wc_{tab-key} 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.
Translate the tab titles from WPML -> String Translation -> In domain: ska-theme.
Extra thumbnails
Displays second product image when hovering over a product image in the loop.
Cart
If you’ve installed WC and you go the edit the Cart page and it has WooCommerce blocks:
hit the Switch to classic cart button in the right sidebar when the Cart block is selected:
The theme is designed for classic cart.
Classic cart can also be rendered with the shortcode:
[woocommerce_cart]Checkout
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:
The theme is designed for classic checkout.
Classic checkout can also be rendered with the shortcode:
[woocommerce_checkout]My account
The WooCommerce My account page should just contain the shortcode:
[woocommerce_my_account]Image sizes
WooCommerce section in ska-theme options includes controls to change the various WC product image sizes:
After changing these settings, you should go to WooCommerce -> Status -> Tools and run the Regenerate shop thumbnails tool.
In the Loop product preset you’ll also be able to change the --product-image-aspect-ratio 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.
Product categories list block
Example WooCommerce Product Categories List block styled with Tailwind classes:
<!-- wp:ska/element {"skaBlocks":{"cx":"[\u0026\u003eli]:[\u0026_.is-list\u003eul]:flex [\u0026_.is-list\u003eul]:relative [\u0026_[class*=\u0022item-count\u0022]]:[\u0026_.is-list\u003eul]:absolute [\u0026_[class*=\u0022item-count\u0022]]:[\u0026_.is-list\u003eul]:right-5 [\u0026\u003eli]:[\u0026_.is-list\u003eul]:flex-col [\u0026\u003eli]:[\u0026_.is-list\u003eul]:justify-between [\u0026\u003eli]:[\u0026_.is-list\u003eul]:items-start [\u0026\u003eli]:[\u0026_.is-list\u003eul]:px-5 [\u0026\u003eli]:[\u0026_.is-list\u003eul]:py-2 [\u0026_.is-list\u003eul]:m-0 [\u0026_ul]:[\u0026_.is-list\u003eul]:ml-0 [\u0026_ul]:[\u0026_ul]:[\u0026_.is-list\u003eul]:ml-4 [\u0026_.is-list\u003eul]:w-full [\u0026_.is-list\u003eul]:text-base [\u0026\u003eli]:[\u0026_ul]:[\u0026_.is-list\u003eul]:text-sm [\u0026_a.active]:[\u0026_.is-list\u003eul]:font-bold [\u0026\u003ea]:[\u0026\u003eli]:[\u0026_.is-list\u003eul]:font-medium [\u0026\u003ea]:[\u0026\u003eli]:[\u0026_.is-list\u003eul]:text-site hover:[\u0026\u003ea]:[\u0026\u003eli]:[\u0026_.is-list\u003eul]:text-link-hover [\u0026\u003ea]:[\u0026\u003eli]:[\u0026_ul]:[\u0026_.is-list\u003eul]:text-site-subtext hover:[\u0026\u003ea]:[\u0026\u003eli]:[\u0026_ul]:[\u0026_.is-list\u003eul]:text-link-hover [\u0026_[class*=\u0022item-count\u0022]]:[\u0026_.is-list\u003eul]:text-site-muted [\u0026_.is-list\u003eul]:rounded [\u0026_.is-list\u003eul]:border [\u0026_.is-list\u003eul]:divide-y [\u0026_.is-list\u003eul]:shadow","t":1709756495,"css":".\\[\\\u0026_\\.is-list\\\u003eul\\]\\:relative .is-list\u003eul{position:relative}.\\[\\\u0026_\\.is-list\\\u003eul\\]\\:m-0 .is-list\u003eul{margin:var(\u002d\u002dska-spacing-0)}.\\[\\\u0026_\\.is-list\\\u003eul\\]\\:w-full .is-list\u003eul{width:100%}.\\[\\\u0026_\\.is-list\\\u003eul\\]\\:divide-y .is-list\u003eul \u003e :not([hidden]) ~ :not([hidden]){\u002d\u002dtw-divide-y-reverse:0;border-top-width:calc(1px * calc(1 - var(\u002d\u002dtw-divide-y-reverse)));border-bottom-width:calc(1px * var(\u002d\u002dtw-divide-y-reverse))}.\\[\\\u0026_\\.is-list\\\u003eul\\]\\:rounded .is-list\u003eul{border-radius:var(\u002d\u002dska-border-radius)}.\\[\\\u0026_\\.is-list\\\u003eul\\]\\:border .is-list\u003eul{border-width:1px}.\\[\\\u0026_\\.is-list\\\u003eul\\]\\:text-base .is-list\u003eul{font-size:var(\u002d\u002dska-font-size-base);line-height:var(\u002d\u002dska-font-size-base-lh)}.\\[\\\u0026_\\.is-list\\\u003eul\\]\\:shadow .is-list\u003eul{\u002d\u002dtw-shadow:0 1px 3px 0 rgb(0 0 0/0.1),0 1px 2px -1px rgb(0 0 0/0.1);\u002d\u002dtw-shadow-colored:0 1px 3px 0 var(\u002d\u002dtw-shadow-color),0 1px 2px -1px var(\u002d\u002dtw-shadow-color);box-shadow:var(\u002d\u002dtw-ring-offset-shadow,0 0 #0000),var(\u002d\u002dtw-ring-shadow,0 0 #0000),var(\u002d\u002dtw-shadow)}.\\[\\\u0026\\\u003eli\\]\\:\\[\\\u0026_\\.is-list\\\u003eul\\]\\:flex .is-list\u003eul\u003eli{display:flex}.\\[\\\u0026\\\u003eli\\]\\:\\[\\\u0026_\\.is-list\\\u003eul\\]\\:flex-col .is-list\u003eul\u003eli{flex-direction:column}.\\[\\\u0026\\\u003eli\\]\\:\\[\\\u0026_\\.is-list\\\u003eul\\]\\:items-start .is-list\u003eul\u003eli{align-items:flex-start}.\\[\\\u0026\\\u003eli\\]\\:\\[\\\u0026_\\.is-list\\\u003eul\\]\\:justify-between .is-list\u003eul\u003eli{justify-content:space-between}.\\[\\\u0026\\\u003eli\\]\\:\\[\\\u0026_\\.is-list\\\u003eul\\]\\:px-5 .is-list\u003eul\u003eli{padding-left:var(\u002d\u002dska-spacing-5);padding-right:var(\u002d\u002dska-spacing-5)}.\\[\\\u0026\\\u003eli\\]\\:\\[\\\u0026_\\.is-list\\\u003eul\\]\\:py-2 .is-list\u003eul\u003eli{padding-top:var(\u002d\u002dska-spacing-2);padding-bottom:var(\u002d\u002dska-spacing-2)}.\\[\\\u0026\\\u003ea\\]\\:\\[\\\u0026\\\u003eli\\]\\:\\[\\\u0026_\\.is-list\\\u003eul\\]\\:font-medium .is-list\u003eul\u003eli\u003ea{font-weight:var(\u002d\u002dska-font-weight-medium)}.\\[\\\u0026\\\u003ea\\]\\:\\[\\\u0026\\\u003eli\\]\\:\\[\\\u0026_\\.is-list\\\u003eul\\]\\:text-site .is-list\u003eul\u003eli\u003ea{\u002d\u002dtw-text-opacity:1;color:rgba(var(\u002d\u002dska-rgb-site),0.87)}.hover\\:\\[\\\u0026\\\u003ea\\]\\:\\[\\\u0026\\\u003eli\\]\\:\\[\\\u0026_\\.is-list\\\u003eul\\]\\:text-link-hover .is-list\u003eul\u003eli\u003ea:hover{\u002d\u002dtw-text-opacity:1;color:rgba(var(\u002d\u002dska-rgb-link-hover),1)}.\\[\\\u0026_\\[class\\*\\=\\\u0022item-count\\\u0022\\]\\]\\:\\[\\\u0026_\\.is-list\\\u003eul\\]\\:absolute .is-list\u003eul [class*=\u0022item-count\u0022]{position:absolute}.\\[\\\u0026_\\[class\\*\\=\\\u0022item-count\\\u0022\\]\\]\\:\\[\\\u0026_\\.is-list\\\u003eul\\]\\:right-5 .is-list\u003eul [class*=\u0022item-count\u0022]{right:var(\u002d\u002dska-spacing-5)}.\\[\\\u0026_\\[class\\*\\=\\\u0022item-count\\\u0022\\]\\]\\:\\[\\\u0026_\\.is-list\\\u003eul\\]\\:text-site-muted .is-list\u003eul [class*=\u0022item-count\u0022]{\u002d\u002dtw-text-opacity:1;color:rgba(var(\u002d\u002dska-rgb-site-muted),0.7)}.\\[\\\u0026_a\\.active\\]\\:\\[\\\u0026_\\.is-list\\\u003eul\\]\\:font-bold .is-list\u003eul a.active{font-weight:var(\u002d\u002dska-font-weight-bold)}.\\[\\\u0026_ul\\]\\:\\[\\\u0026_\\.is-list\\\u003eul\\]\\:ml-0 .is-list\u003eul ul{margin-left:var(\u002d\u002dska-spacing-0)}.\\[\\\u0026_ul\\]\\:\\[\\\u0026_ul\\]\\:\\[\\\u0026_\\.is-list\\\u003eul\\]\\:ml-4 .is-list\u003eul ul ul{margin-left:var(\u002d\u002dska-spacing-4)}.\\[\\\u0026\\\u003eli\\]\\:\\[\\\u0026_ul\\]\\:\\[\\\u0026_\\.is-list\\\u003eul\\]\\:text-sm .is-list\u003eul ul\u003eli{font-size:var(\u002d\u002dska-font-size-sm);line-height:var(\u002d\u002dska-font-size-sm-lh)}.\\[\\\u0026\\\u003ea\\]\\:\\[\\\u0026\\\u003eli\\]\\:\\[\\\u0026_ul\\]\\:\\[\\\u0026_\\.is-list\\\u003eul\\]\\:text-site-subtext .is-list\u003eul ul\u003eli\u003ea{\u002d\u002dtw-text-opacity:1;color:rgba(var(\u002d\u002dska-rgb-site-subtext),1)}.hover\\:\\[\\\u0026\\\u003ea\\]\\:\\[\\\u0026\\\u003eli\\]\\:\\[\\\u0026_ul\\]\\:\\[\\\u0026_\\.is-list\\\u003eul\\]\\:text-link-hover .is-list\u003eul ul\u003eli\u003ea:hover{\u002d\u002dtw-text-opacity:1;color:rgba(var(\u002d\u002dska-rgb-link-hover),1)}"},"skaBlocksSelectors":{"[\u0026_.is-list\u003eul]":{"skaBlocksSelectors":{"[\u0026\u003eli]":{"skaBlocksSelectors":{"[\u0026\u003ea]":{"skaBlocksTextColor":{"v":{"$":{"@":"site"},"hover":{"@":"link-hover"}}},"skaBlocksFontWeight":{"v":{"$":{"@":"medium"}}}}},"skaBlocksDisplay":{"v":{"$":{"@":"flex"}}},"skaBlocksPadding":{"v":{"$":{"@":"","x":"5","y":"2"}},"t":"axis"},"skaBlocksFlexDirection":{"v":{"$":{"@":"col"}}},"skaBlocksAlignItems":{"v":{"$":{"@":"start"}}},"skaBlocksJustifyContent":{"v":{"$":{"@":"between"}}}},"[\u0026_ul]":{"skaBlocksMargin":{"v":{"$":{"@":"","l":"0"},"[\u0026_ul]":{"l":"4"}},"t":"sides"},"skaBlocksSelectors":{"[\u0026\u003eli]":{"skaBlocksSelectors":{"[\u0026\u003ea]":{"skaBlocksTextColor":{"v":{"$":{"@":"site-subtext"},"hover":{"@":"link-hover"}}}}},"skaBlocksFontSize":{"v":{"$":{"@":"sm"}}}}}},"[\u0026_[class*=\u0022item-count\u0022]]":{"skaBlocksPosition":{"v":{"$":{"@":"absolute"}}},"skaBlocksTopRightBottomLeft":{"v":{"$":{"@":"","r":"5"}}},"skaBlocksTextColor":{"v":{"$":{"@":"site-muted"}}}}},"skaBlocksFontSize":{"v":{"$":{"@":"base"}}},"skaBlocksFontWeight":{"v":{"$":{"@":""},"[\u0026_a.active]":{"@":"bold"}}},"skaBlocksBorderRadius":{"v":{"$":{"@":"DEFAULT"}}},"skaBlocksBorderWidth":{"v":{"$":{"@":"DEFAULT"}}},"skaBlocksDivideWidth":{"v":{"$":{"@":"","x":"","y":"DEFAULT"}}},"skaBlocksBoxShadow":{"v":{"$":{"@":"DEFAULT"}}},"skaBlocksMargin":{"v":{"$":{"@":"0"}}},"skaBlocksWidth":{"v":{"$":{"@":"full"}}},"skaBlocksPosition":{"v":{"$":{"@":"relative"}}}}}} -->
<div class="[&>li]:[&_.is-list>ul]:flex [&_.is-list>ul]:relative [&_[class*="item-count"]]:[&_.is-list>ul]:absolute [&_[class*="item-count"]]:[&_.is-list>ul]:right-5 [&>li]:[&_.is-list>ul]:flex-col [&>li]:[&_.is-list>ul]:justify-between [&>li]:[&_.is-list>ul]:items-start [&>li]:[&_.is-list>ul]:px-5 [&>li]:[&_.is-list>ul]:py-2 [&_.is-list>ul]:m-0 [&_ul]:[&_.is-list>ul]:ml-0 [&_ul]:[&_ul]:[&_.is-list>ul]:ml-4 [&_.is-list>ul]:w-full [&_.is-list>ul]:text-base [&>li]:[&_ul]:[&_.is-list>ul]:text-sm [&_a.active]:[&_.is-list>ul]:font-bold [&>a]:[&>li]:[&_.is-list>ul]:font-medium [&>a]:[&>li]:[&_.is-list>ul]:text-site hover:[&>a]:[&>li]:[&_.is-list>ul]:text-link-hover [&>a]:[&>li]:[&_ul]:[&_.is-list>ul]:text-site-subtext hover:[&>a]:[&>li]:[&_ul]:[&_.is-list>ul]:text-link-hover [&_[class*="item-count"]]:[&_.is-list>ul]:text-site-muted [&_.is-list>ul]:rounded [&_.is-list>ul]:border [&_.is-list>ul]:divide-y [&_.is-list>ul]:shadow wp-block-ska-element"><!-- wp:woocommerce/product-categories {"hasEmpty":true} /--></div>
<!-- /wp:ska/element -->