{"id":74184,"date":"2016-08-01T09:07:16","date_gmt":"2016-08-01T13:07:16","guid":{"rendered":"http:\/\/www.templatemonster.com\/help\/?p=74184"},"modified":"2016-08-22T06:06:47","modified_gmt":"2016-08-22T10:06:47","slug":"woocommerce-how-to-change-order-of-tabs-on-product-page","status":"publish","type":"post","link":"https:\/\/www.templatemonster.com\/help\/woocommerce-how-to-change-order-of-tabs-on-product-page.html","title":{"rendered":"WooCommerce. How to change order of tabs on product page"},"content":{"rendered":"<p>Hello! This video tutorial shows how to <strong>change the order of tabs<\/strong> on product page in WooCommerce templates.<\/p>\r\n\r\n <div class=\"video-container\">\r\n\t<iframe src=\"https:\/\/www.youtube.com\/embed\/Lvnmlo3MGlU\"><\/iframe>\r\n<\/div>\r\n<p>There are information tabs on product single pages in WooCommerce that you may want to reorder:<\/p>\r\n\r\n<a class=\"darkbox\" href=\"\/help\/wp-content\/uploads\/2016\/08\/wocommerce_change_order_of_tabs_1.png\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2016\/08\/wocommerce_change_order_of_tabs_1-300x169.png\" alt=\"wocommerce_change_order_of_tabs_1\" width=\"300\" height=\"169\" class=\"alignnone size-medium wp-image-74185\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/08\/wocommerce_change_order_of_tabs_1-300x169.png 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/08\/wocommerce_change_order_of_tabs_1-150x84.png 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/08\/wocommerce_change_order_of_tabs_1-1024x576.png 1024w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/08\/wocommerce_change_order_of_tabs_1.png 1280w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a>\r\n<p>Let&#8217;s learn how to do that.<\/p>\r\n<p>Let&#8217;s say, you want to have <strong>Video<\/strong> tab to be displayed the first.<\/p>\r\n<p>The tutorial assumes you are already logged in to your WordPress dashboard.<\/p>\r\n<ol>\r\n\t<li>\r\n\t\t<p>Navigate to the <strong>Appearance ->Editor<\/strong> tab:<\/p>\r\n\t\t\r\n<a class=\"darkbox\" href=\"\/help\/wp-content\/uploads\/2016\/08\/wocommerce_change_order_of_tabs_2.png\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2016\/08\/wocommerce_change_order_of_tabs_2-300x153.png\" alt=\"wocommerce_change_order_of_tabs_2\" width=\"300\" height=\"153\" class=\"alignnone size-medium wp-image-74186\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/08\/wocommerce_change_order_of_tabs_2-300x153.png 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/08\/wocommerce_change_order_of_tabs_2-150x77.png 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/08\/wocommerce_change_order_of_tabs_2-1024x523.png 1024w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/08\/wocommerce_change_order_of_tabs_2.png 1279w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a>\t<\/li>\r\n\t<li>\r\n\t\t<p>Then, click the <strong>custom-function.php<\/strong> file title at the right hand side:<\/p>\r\n\t\t\r\n<a class=\"darkbox\" href=\"\/help\/wp-content\/uploads\/2016\/08\/wocommerce_change_order_of_tabs_3.jpg\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2016\/08\/wocommerce_change_order_of_tabs_3-300x160.jpg\" alt=\"wocommerce_change_order_of_tabs_3\" width=\"300\" height=\"160\" class=\"alignnone size-medium wp-image-74187\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/08\/wocommerce_change_order_of_tabs_3-300x160.jpg 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/08\/wocommerce_change_order_of_tabs_3-150x80.jpg 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/08\/wocommerce_change_order_of_tabs_3-1024x546.jpg 1024w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/08\/wocommerce_change_order_of_tabs_3.jpg 1274w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a>\t<\/li>\r\n\t<li>\r\n\t\t<p>Now that the file editing interface is opened in front of you, scroll down to the very end of the file and add the following code right before the <strong>closing PHP tag<\/strong>:<\/p>\r\n\t\t<pre class=\"brush:php\">add_filter( 'woocommerce_product_tabs', 'reordered_tabs', 98 );\r\nfunction reordered_tabs( $tabs ) {\r\n\t$tabs['cherry_wc_video']['priority'] = 5; \r\n\t$tabs['description']['priority'] = 10; \r\n\t$tabs['reviews']['priority'] = 15;\r\n\r\n\treturn $tabs;\r\n}<\/pre>\r\n\t\t<p>As you can see, we have set the <strong>Video<\/strong> tab to be the first one displayed:<\/p>\r\n\t\t\r\n<a class=\"darkbox\" href=\"\/help\/wp-content\/uploads\/2016\/08\/wocommerce_change_order_of_tabs_4.png\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2016\/08\/wocommerce_change_order_of_tabs_4-300x165.png\" alt=\"wocommerce_change_order_of_tabs_4\" width=\"300\" height=\"165\" class=\"alignnone size-medium wp-image-74188\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/08\/wocommerce_change_order_of_tabs_4-300x165.png 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/08\/wocommerce_change_order_of_tabs_4-150x83.png 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/08\/wocommerce_change_order_of_tabs_4-1024x563.png 1024w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/08\/wocommerce_change_order_of_tabs_4.png 1247w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a>\t<\/li>\r\n\t<li>\r\n\t\t<p>Click on the <strong>&quot;Update File&quot;<\/strong> button to apply changes.<\/p>\r\n\t<\/li>\r\n\t<li>\r\n\t\t<p>Navigate to your front-end and open any product page &#8211; you can see tabs have been successfully reordered:<\/p>\r\n\t\t\r\n<a class=\"darkbox\" href=\"\/help\/wp-content\/uploads\/2016\/08\/wocommerce_change_order_of_tabs_5.png\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2016\/08\/wocommerce_change_order_of_tabs_5-300x157.png\" alt=\"wocommerce_change_order_of_tabs_5\" width=\"300\" height=\"157\" class=\"alignnone size-medium wp-image-74189\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/08\/wocommerce_change_order_of_tabs_5-300x157.png 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/08\/wocommerce_change_order_of_tabs_5-150x79.png 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/08\/wocommerce_change_order_of_tabs_5-1024x537.png 1024w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/08\/wocommerce_change_order_of_tabs_5.png 1247w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a>\t<\/li>\r\n<\/ol>\r\n<p>This is the end of the tutorial. Now you know how to <strong>change the order of tabs<\/strong> on product page in your WooCommerce template.<\/p>\r\n<p>Feel free to check the detailed video tutorial below:<\/p>\r\n<a href=\"http:\/\/www.youtube.com\/watch?v=Lvnmlo3MGlU?width=1280&amp;height=720\" rel=\"prettyPhoto\">WooCommerce. How to change order of tabs on product page<\/a>","protected":false},"excerpt":{"rendered":"<p>Hello! This video tutorial shows how to <strong>change the order of tabs<\/strong> on product page in WooCommerce templates.<\/p>\n","protected":false},"author":68,"featured_media":74190,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[1556],"tags":[2248,1462,2418],"_links":{"self":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/74184"}],"collection":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/users\/68"}],"replies":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/comments?post=74184"}],"version-history":[{"count":0,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/74184\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media\/74190"}],"wp:attachment":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media?parent=74184"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/categories?post=74184"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/tags?post=74184"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}