{"id":819,"date":"2021-03-14T09:22:26","date_gmt":"2021-03-14T09:22:26","guid":{"rendered":"https:\/\/ithemelandco.com\/docs\/woocommerce-product-table\/?p=819"},"modified":"2022-05-08T12:10:08","modified_gmt":"2022-05-08T12:10:08","slug":"add-variable-products-to-cart-by-woocommerce-product-table-plugin","status":"publish","type":"post","link":"https:\/\/ithemelandco.com\/docs\/woocommerce-product-table\/add-variable-products-to-cart-by-woocommerce-product-table-plugin\/","title":{"rendered":"How to add variable products to the cart by Woocommerce product table plugin?"},"content":{"rendered":"\n

Adding variable products to cart is important for customers when purchasing from an online store. They can choose their favorite attributes and have a better shopping experience.<\/p>\n\n\n\n

To add variable products to the cart you have to assign some attributes to your products in Woocommerce. <\/p>\n\n\n\n

Let\u2019s consider that you have some variable products in your online store. You want to make it possible for your customers to add them into the cart for shopping.<\/p>\n\n\n\n

By default, you can\u2019t add variable products before choosing a variation. But in our plugin you can choose multi product variation and add them to the cart by one click. <\/p>\n\n\n\n

You have two option for showing variation in woocommerce product table plugin<\/a>:<\/p>\n\n\n\n

Add variable products as a separate column<\/strong><\/h2>\n\n\n\n

For adding variation as a separate column, you must go to the \u201cColumns<\/strong>\u201d tab. Then activate the \u201cVariation<\/strong>\u201d column by clicking on the desired device icon. This means if you want to show variation column on desktop, tablet or mobile devices. You can activate\/deactivate them from here.<\/p>\n\n\n\n

\"Add<\/a><\/figure>\n\n\n\n

Add variable products to the action column<\/strong><\/h2>\n\n\n\n

To help customers adding variable products to cart, you have to change some features of your product table in the \u201cSetting<\/strong>\u201d tab.<\/p>\n\n\n\n

\"Setting<\/a><\/figure>\n\n\n\n

By scrolling down in this page, you can see the \u201cShow Variation in Action Column<\/strong>\u201d as below:<\/p>\n\n\n\n

\"Show<\/a><\/figure>\n\n\n\n

You have to mark the checkbox next to \u201cShow<\/strong>\u201d to enable this option in the product table. By enabling this option, select variation button will be add to \u201cAction<\/strong>\u201d column beside \u201cadd to cart<\/strong>\u201d button as you can see below:<\/p>\n\n\n\n

\"select<\/a><\/figure>\n\n\n\n

Note:<\/strong> We also enable ‘Sticky Column<\/strong>‘ for our product table to stick the \u201cAction<\/strong>\u201d column at the left side of the table. You can also add an \u201cAction<\/strong>\u201d column from the \u201cColumns<\/strong>\u201d tab to add it into columns of the product table. We described all of these options in \u201cHow to create a product table with a cart<\/a>\u201d tutorial.<\/p>\n\n\n\n

By refreshing the front page, you can see that the product variation option has been added to the action column:<\/p>\n\n\n\n

\"product<\/a><\/figure>\n\n\n\n

By adding this option, customers can select their favorite attributes directly from the action column:<\/p>\n\n\n\n

\"select<\/a><\/figure>\n\n\n\n

Add attributes to the product variation<\/strong><\/h2>\n\n\n\n

If you add any attributes to the WooCommerce and assign it to the products, it will be automatically added to your product variations in the product table.<\/p>\n\n\n\n

For example, in this tutorial, we added material as an attribute to the WooCommerce:<\/p>\n\n\n\n

\"New<\/a><\/figure>\n\n\n\n

And then we assigned it to the ‘V-Neck T-shirt’:<\/p>\n\n\n\n

\"Assign<\/a><\/figure>\n\n\n\n

There is no need to change any setting in the product table. When you open the product table page, the variations are there:<\/p>\n\n\n\n

\"Choose<\/a><\/figure>\n\n\n\n

How can customers add variation products to their cart?<\/strong><\/h2>\n\n\n\n

As you can see in the above, customers are not allowed to add the product to their cart before setting their preferred variations as the check box and the basket option is off.<\/p>\n\n\n\n

When they set their favorite attributes as below, the items will turn on and they are able to add them to their cart by clicking on basket item:<\/p>\n\n\n\n

\"add<\/a><\/figure>\n","protected":false},"excerpt":{"rendered":"

Adding variable products to cart is important for customers when purchasing from an online store. They can choose their favorite attributes and have a better shopping experience. To add variable products to the cart you have to assign some attributes to your products in Woocommerce. Let\u2019s consider that you have some variable products in your […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-819","post","type-post","status-publish","format-standard","hentry","category-plugin-usage"],"_links":{"self":[{"href":"https:\/\/ithemelandco.com\/docs\/woocommerce-product-table\/wp-json\/wp\/v2\/posts\/819","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ithemelandco.com\/docs\/woocommerce-product-table\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ithemelandco.com\/docs\/woocommerce-product-table\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ithemelandco.com\/docs\/woocommerce-product-table\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ithemelandco.com\/docs\/woocommerce-product-table\/wp-json\/wp\/v2\/comments?post=819"}],"version-history":[{"count":4,"href":"https:\/\/ithemelandco.com\/docs\/woocommerce-product-table\/wp-json\/wp\/v2\/posts\/819\/revisions"}],"predecessor-version":[{"id":957,"href":"https:\/\/ithemelandco.com\/docs\/woocommerce-product-table\/wp-json\/wp\/v2\/posts\/819\/revisions\/957"}],"wp:attachment":[{"href":"https:\/\/ithemelandco.com\/docs\/woocommerce-product-table\/wp-json\/wp\/v2\/media?parent=819"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ithemelandco.com\/docs\/woocommerce-product-table\/wp-json\/wp\/v2\/categories?post=819"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ithemelandco.com\/docs\/woocommerce-product-table\/wp-json\/wp\/v2\/tags?post=819"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}