{"id":3664,"date":"2020-10-06T07:53:19","date_gmt":"2020-10-06T11:53:19","guid":{"rendered":"https:\/\/www.searchenginegenie.com\/web-design-blog\/?p=3664"},"modified":"2020-10-14T03:19:10","modified_gmt":"2020-10-14T07:19:10","slug":"using-flex-css-wordpress-woo-commerce-themes","status":"publish","type":"post","link":"https:\/\/www.searchenginegenie.com\/web-design-blog\/using-flex-css-wordpress-woo-commerce-themes\/","title":{"rendered":"Using Flex CSS WordPress Woo-commerce Themes"},"content":{"rendered":"<p>Step 1:<br \/>\nMany of the woo-commerce themes use Flex css for the sidebar.<\/p>\n<p><a name=\"imageclose-3665\"><div class=\"lb-album\"><a href=\"#image-3665\"><img src=\"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-content\/uploads\/2020\/10\/flex-width.jpg\" alt=\"double-column\" class=\"size-medium wp-image-3543 aligncenter\"><span><\/span><\/a><\/div>              \r\n<a href=\"#imageclose-3665\" class=\"css3lightbox-close\">\r\n\t\t\t\t   <div class=\"lb-overlay\" id=\"image-3665\">\r\n                   <img src=\"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-content\/uploads\/2020\/10\/flex-width-700.jpg\" alt=\"image-3665\">\r\n                   <\/div><\/a><\/p>\n<p>Step 2:<br \/>\nFor single page product,We didn&#8217;t need the sidebar. So use simple snippet to hide the sidebar and move the right column to left side.<br \/>\n<br \/>\nSnippet:<br \/>\n.class name<br \/>\n{<br \/>\nflex: 0 0 0%;<br \/>\ndisplay:none;<br \/>\n}<\/p>\n<p><a name=\"imageclose-3666\"><div class=\"lb-album\"><a href=\"#image-3666\"><img src=\"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-content\/uploads\/2020\/10\/single-column.jpg\" alt=\"single-column\" class=\"size-medium wp-image-3543 aligncenter\"><span><\/span><\/a><\/div>              \r\n<a href=\"#imageclose-3666\" class=\"css3lightbox-close\">\r\n\t\t\t\t   <div class=\"lb-overlay\" id=\"image-3666\">\r\n                   <img src=\"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-content\/uploads\/2020\/10\/single-column-700.jpg\" alt=\"image-3666\">\r\n                   <\/div><\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Step 1: Many of the woo-commerce themes use Flex css for the sidebar. Step 2: For single page product,We didn&#8217;t need the sidebar. So use simple snippet to hide the sidebar and move the right column to left side. Snippet: .class name { flex: 0 0 0%; display:none; }<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[161,6,5],"tags":[187,158],"class_list":["post-3664","post","type-post","status-publish","format-standard","hentry","category-css-design-tutorials","category-web-design","category-web-design-tips","tag-css","tag-html-2"],"_links":{"self":[{"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/posts\/3664","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/comments?post=3664"}],"version-history":[{"count":11,"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/posts\/3664\/revisions"}],"predecessor-version":[{"id":3685,"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/posts\/3664\/revisions\/3685"}],"wp:attachment":[{"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/media?parent=3664"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/categories?post=3664"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/tags?post=3664"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}