SaaS Web Info

WordPress and WooCommerce – The Perfect Duo

7 minute read

This post is from April 2018. The screenshots show the interface as it was then; today it looks slightly different in places.

WordPress is well known as the number one CMS worldwide; that is no longer news. What is actually not new, but less known, is that WordPress with WooCommerce is also the number one in the online shop sector.

WooCommerce has also been part of Automattic since 2015, which ensures that the compatibility and development of the extension will be permanent.

After WooCommerce is installed and activated, new Custom Post Types, Custom Taxonomies, and special pages are created. The Custom Post Type, you guessed it, is the representation of a product in WordPress; the Custom Taxonomy is used for the product category and the product tag. The special pages are the shop page (by default /shop) where all products are displayed, the Terms and Conditions page (/terms-conditions), the customer area (/my-account) so that customers can track their current orders, the shopping cart (/cart), and the checkout page (/checkout).

Here are the features provided with WooCommerce:

  • Products
    • Product types: simple product, variable product, “non-material” goods, linking to another product. A variable product is, for example, a product in several sizes or colors. The individual variations can be created based on freely definable attributes. Non-material products are, for example, PDF downloads or download codes.
    • Product presentation: For each product, a name, a short description, and a detailed description of the product can be entered. In addition, a large product image as well as additional images (gallery) can be added. Naturally, a price is also specified.
  • Currency, prices: Both the currency can be set and whether the prices are displayed with or without VAT. Different VAT rates can also be specified, depending on the country of origin of the order.
  • Inventory management: A simple inventory management system can be activated. The quantity is entered manually, and the stock level is then automatically adjusted based on orders. The stock quantity can be specified for the respective variations of variable products. It is also possible to set whether a product automatically switches to out of stock when the stock quantity is 0, or whether “backorders” should be allowed and how many.
  • Shipping: Shipping zones are defined. A shipping zone can apply to one or more countries, and one or more shipping methods are specified for it, such as flat rate shipping or free delivery.
  • Payment options: By default, a PayPal integration can be activated; otherwise, the following options are available: bank transfer, cash on delivery, and check. Coupons can also be activated and applied to orders.
  • Customer account: There is the possibility to activate the account function for customers, thereby offering them an area where they can find information about current and past orders.
  • Emails: There are different email templates for various actions (order confirmation, cancellation, etc.).
  • API: Very important for developers! The WooCommerce API enables access to and processing of all functions via REST.

Of course, these are not all the features; they are the most important ones (that come to mind while I am writing this article).

With WPML, you can adapt your WooCommerce shop for multiple languages. You can translate products analogously to normal pages or posts, as well as products and their associated attributes and taxonomies. Ideally, the WooCommerce Multilingual plugin is installed and activated for this purpose.

Different Stock Quantities per Language

However, if you have different stock quantities per language, you initially have a problem.

The quantity can only be controlled centrally via the product in the default language. This means that the translated product has the same quantity as the one from the default language.

One option is to create the product as a variable product and create language variations (for variable products, the stock quantity can be set per variation). It is not quite that simple, however: widgets supplied with WooCommerce, such as top-rated products, cannot handle the variations; they use the stock quantity of the variation defined as the default to display the Add to cart link or only to link to the product.

Furthermore, you probably want (as we did) the language variation of the current language to be preselected. This cannot be done via the set default attribute option either, as this option then applies to all languages.

You can see the result here on the shop page: www.textilbox.de, www.textilbox.es, and www.textilbox.fr.

The filters shown below are all assigned to an init action and are to be defined in the functions.php:

add_action('init', function() {

  add_filter('function-name', function($args){
 .. Code ...
 },1,1); 

}

For it to work as specified in the code below, you must name the language variations with the same ISO codes that WPML uses. We have 3 language variations: German, French, and Spanish, and have named them de, fr, and es respectively.

We also created the Language attribute, which is used to create the variations.

add_filter('woocommerce_product_add_to_cart_url', function($url, $product){
 if (is_a($product, 'WC_Product_Variable')) {
 $variations = $product->get_available_variations();
 $default_var = ICL_LANGUAGE_CODE . "-" . ICL_LANGUAGE_CODE;  
  if ($default_var) {
  foreach ($variations as $variation) {
  if (
  count($variation['attributes']) == 1 &&  
  isset($variation['attributes']['attribute_pa_language']) &&  
  $variation['attributes']['attribute_pa_language'] == $default_var &&  
  $variation['variation_is_active'] &&
  $variation['variation_is_visible'] &&
  $variation['is_purchasable'] ) {
  $url = remove_query_arg( 'added-to-cart', add_query_arg( array( 'variation_id' => $variation['variation_id'], 'add-to-cart' => $product->get_id() ), $product->get_permalink() ) );
  return $url;
  }
  }
  }
  }
  return $url;
}, 99, 2);

This value $default_var = ICL_LANGUAGE_CODE . "-" . ICL_LANGUAGE_CODE; is set so that when clicking on Add to cart, the language variation of the current language is selected. Should a buyer wish for a different language variation, they must first select the product and then choose the desired variation there.

As an alternative to the constant ICL_LANGUAGE_CODE, this function can also be used:
global $sitepress;
$my_current_lang = $sitepress->get_current_language();

add_filter('woocommerce_product_add_to_cart_text', function($text, $product){
 if (is_a($product, 'WC_Product_Variable')) {
 $text = $product->is_purchasable() && $product->is_in_stock() ? __( 'Add to cart', 'woocommerce' ) : __( 'Read more', 'woocommerce' );
 }
 return $text;
}, 99, 2); 
add_filter( 'woocommerce_dropdown_variation_attribute_options_args', function($args){
 $attribute = $args['attribute'];
 if (empty($args['selected']) && $attribute == 'pa_language') {
 $args['selected'] = ICL_LANGUAGE_CODE . "-" . ICL_LANGUAGE_CODE;
 }
 return $args;
}, 10, 1 );  

What Happens to the Shopping Cart When the Customer Changes the Language?

That is an interesting question. There are several possibilities:

  • If you have set up the languages so that your website divides them like website.tld/de, website.tld/fr, then it is easiest. The shopping cart is simply translated (the product remains the same).
  • If you have set up a separate domain for each language (website.de, website.fr), then it becomes a bit more complicated. This is because sessions and cookies are always tied to a domain; if the domain changes, a new session and a new cookie are set. Therefore, WPML must be configured so that the necessary information is transferred either via GET or POST (the data is encrypted).

Extended documentation on this topic can be found here: https://wpml.org/documentation/getting-started-guide/language-setup/passing-session-data-between-languages-in-domains/

In Germany, one is quickly issued a warning if the rules are not followed—this is well known. However, one should not adhere to certain rules only out of fear of punishment; some are quite sensible, for example, the specification of a price per unit quantity. This allows for products offered in different sizes to quickly show whether and how a possible discount applies.

Overview of WooCommerce Germanized Features

The plugin is offered as a freemium extension: there is a free version that can do a lot and a paid Pro version that offers more features. In this article, we are only interested in the free version.

The features:

  • Matching of legally relevant pages such as Legal Notice, Privacy Policy, or Right of Withdrawal
  • Withdrawal form as a shortcode with confirmation via email
  • Activation of the display of a unit price, particularly important for variable products
  • Display of VAT and shipping costs with the price on the overview page and the single product page
  • Activation of the small business regulation
  • Indication of delivery times
  • Activation of a checkbox in the checkout process for customers to consent to the creation of a customer login
  • Double opt-in procedure for the creation of the customer login

Again, not all features are listed here; there are too many 😉

You can visit a shop using WooCommerce Germanized here: www.oelmanufaktur-bender.de.

With the WordPress + WooCommerce combination, you benefit from a selection of thousands of extensions. Furthermore, numerous adjustments can be made without directly touching the code of the CMS or WooCommerce, ensuring the upgradeability of the system. In the examples mentioned above, the adjustments are made via Hooks, Actions, and Filters; WooCommerce itself was not modified.

Professional providers who previously concentrated on traditional shop solutions such as Magento, OXID, or Prestashop are increasingly expanding their solutions for WooCommerce.

Another aspect that no one should ignore is development costs. The more widespread a system is, the lower the development costs are, as there are many service providers competing with each other—this drives down prices. However, as is well known, quality still has its price…

Are you planning an online shop? We build and maintain shops with WordPress and WooCommerce. More about WordPress Shops