{"id":64610,"date":"2022-04-11T06:10:55","date_gmt":"2022-04-11T12:10:55","guid":{"rendered":"https:\/\/www.scalahosting.com\/blog\/?p=64610"},"modified":"2023-02-23T05:33:03","modified_gmt":"2023-02-23T11:33:03","slug":"theme-customization","status":"publish","type":"post","link":"https:\/\/www.scalahosting.com\/blog\/theme-customization\/","title":{"rendered":"Theme Customization"},"content":{"rendered":"\n<p>Time to work on your WooCommerce storefront and make sure everything is nice and cozy for visitors to enjoy!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>The Customizer<\/strong><\/h2>\n\n\n\n<p>Aside from the numerous settings screens in the admin area, you can customize the front-end of your Woo store with the Customizer. You can access this feature through <strong>Appearance <\/strong>\u2192 <strong>Customize<\/strong>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong><em>Switching Through Mobile and Desktop View<\/em><\/strong><\/h3>\n\n\n\n<p>Switch between <strong>Mobile <\/strong>and <strong>Desktop view<\/strong> to preview changes you are doing to the front-end. Sometimes differences between screens are significant, and you want everything to look perfect on all devices.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full mpg-gallery\"><a href=\"https:\/\/www.scalahosting.com\/blog\/wp-content\/uploads\/2021\/10\/The-Customizer-1.png\"><img decoding=\"async\" width=\"421\" height=\"59\" src=\"https:\/\/www.scalahosting.com\/blog\/wp-content\/uploads\/2021\/10\/The-Customizer-1.png\" alt=\"Theme Customization, Switching Through Mobile and Desktop View\" class=\"wp-image-62695\" srcset=\"https:\/\/www.scalahosting.com\/blog\/wp-content\/uploads\/2021\/10\/The-Customizer-1.png 421w, https:\/\/www.scalahosting.com\/blog\/wp-content\/uploads\/2021\/10\/The-Customizer-1-300x42.png 300w\" sizes=\"(max-width: 361px) 660px, (max-width: 767px) 89vw, (max-width: 1000px) 54vw, (max-width: 1071px) 910px, 1140px\" \/><\/a><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full mpg-gallery\"><a href=\"https:\/\/www.scalahosting.com\/blog\/wp-content\/uploads\/2021\/10\/The-Customizer-2.png\"><img decoding=\"async\" width=\"421\" height=\"60\" src=\"https:\/\/www.scalahosting.com\/blog\/wp-content\/uploads\/2021\/10\/The-Customizer-2.png\" alt=\"Theme Customization, Switching Through Mobile and Desktop View 2\" class=\"wp-image-62696\" srcset=\"https:\/\/www.scalahosting.com\/blog\/wp-content\/uploads\/2021\/10\/The-Customizer-2.png 421w, https:\/\/www.scalahosting.com\/blog\/wp-content\/uploads\/2021\/10\/The-Customizer-2-300x43.png 300w\" sizes=\"(max-width: 361px) 660px, (max-width: 767px) 89vw, (max-width: 1000px) 54vw, (max-width: 1071px) 910px, 1140px\" \/><\/a><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><strong><em>Customizer Menu Layout<\/em><\/strong><\/h3>\n\n\n\n<p>Usually, Customizer menu items are arranged in the following order:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Default WordPress settings<\/strong>, such as Site Identity.<\/li><li>All other <strong>theme settings<\/strong> \u2014 Background, Typography, and Buttons.<\/li><li><strong>Plugin settings<\/strong> usually occupy the bottom of the list.<\/li><\/ul>\n\n\n\n<p>Scroll down and click on <strong>WooCommerce<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full mpg-gallery\"><a href=\"https:\/\/www.scalahosting.com\/blog\/wp-content\/uploads\/2021\/10\/The-Customizer-3.png\"><img decoding=\"async\" width=\"327\" height=\"90\" src=\"https:\/\/www.scalahosting.com\/blog\/wp-content\/uploads\/2021\/10\/The-Customizer-3.png\" alt=\"Theme Customization, Customizer Menu Layout\" class=\"wp-image-62697\" srcset=\"https:\/\/www.scalahosting.com\/blog\/wp-content\/uploads\/2021\/10\/The-Customizer-3.png 327w, https:\/\/www.scalahosting.com\/blog\/wp-content\/uploads\/2021\/10\/The-Customizer-3-300x83.png 300w\" sizes=\"(max-width: 361px) 660px, (max-width: 767px) 89vw, (max-width: 1000px) 54vw, (max-width: 1071px) 910px, 1140px\" \/><\/a><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><strong><em>Store Notice<\/em><\/strong><\/h3>\n\n\n\n<p>The <strong>Store Notice<\/strong> appears on both the WooCommerce and WordPress parts of your store. It\u2019s commonly used to notify customers of important changes to your business.&nbsp;<\/p>\n\n\n\n<p>An example use case would be notifying users you are temporarily handling orders by phone. You can also use it to notify customers of an ongoing promotion, including a <strong>Coupon Code.<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-full mpg-gallery\"><a href=\"https:\/\/www.scalahosting.com\/blog\/wp-content\/uploads\/2021\/10\/The-Customizer-4.png\"><img decoding=\"async\" width=\"331\" height=\"334\" src=\"https:\/\/www.scalahosting.com\/blog\/wp-content\/uploads\/2021\/10\/The-Customizer-4.png\" alt=\"Theme Customization, Store Notice\" class=\"wp-image-62698\" srcset=\"https:\/\/www.scalahosting.com\/blog\/wp-content\/uploads\/2021\/10\/The-Customizer-4.png 331w, https:\/\/www.scalahosting.com\/blog\/wp-content\/uploads\/2021\/10\/The-Customizer-4-297x300.png 297w, https:\/\/www.scalahosting.com\/blog\/wp-content\/uploads\/2021\/10\/The-Customizer-4-150x150.png 150w\" sizes=\"(max-width: 361px) 660px, (max-width: 767px) 89vw, (max-width: 1000px) 54vw, (max-width: 1071px) 910px, 1140px\" \/><\/a><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><strong><em>Product Catalog<\/em><\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Shop Page Display<\/strong> is the first option on the Product Catalog list. It refers to the front page of your WooCommerce store. You can set it to:<ul><li><strong>Show Products<\/strong><em> <\/em>for stores with less than 30 products;\u00a0<\/li><li><strong>Show Categories &amp; Products<\/strong> for stores with 100 or so products;<\/li><li><strong>Show Categories<\/strong> for drastically bigger inventories.<\/li><\/ul><\/li><li><strong>Category Display<\/strong> is for category pages of your store.\u00a0<ul><li><strong>Show<\/strong><a href=\"https:\/\/woocommerce.com\/document\/woocommerce-product-search\/widgets\/product-filter-categories\/\"><strong> Products<\/strong><\/a><strong> <\/strong>is best when you are starting out with a smaller inventory<\/li><li><strong>Show Subcategories &amp; Products<\/strong> is recommended for larger inventories<\/li><li><strong>Show Subcategories<\/strong> can be used when you want to drive attention to smaller subcategories.<\/li><\/ul><\/li><\/ul>\n\n\n\n<p><strong>Default Product Sorting<\/strong> is an important option as it defines which products are pushed to the top of every category page. Such products always receive the most attention.&nbsp;<\/p>\n\n\n\n<p>The available options here are:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Sort by price (asc)<\/strong> displays your most affordable products first.<\/li><li><strong>Sort by most recent<\/strong> for showing off your newest arrivals.<\/li><li><strong>Sort by average rating<\/strong> for online shops with lots of user ratings.<\/li><li><strong>Popularity (sales) <\/strong>for focusing your product listings on best-sellers.<\/li><\/ul>\n\n\n\n<p><strong>Products per Row <\/strong>is often set to <strong>3 <\/strong>or <strong>4<\/strong>. Note that this setting can make product category pages on some themes look broken or distorted.<\/p>\n\n\n\n<p>When defining the <strong>Rows per Page<\/strong>,<strong> <\/strong>it\u2019s worth considering how many products will appear on each page. Additionally, mobile view (smartphone width) should always collapse product listings to a single column \u2014 <strong>3 <\/strong>to <strong>5 <\/strong>is most common.<\/p>\n\n\n\n<p class=\"alert-blue\"><strong><em>Example:<\/em><\/strong><em> Displaying 4 products per row and 5 rows per page makes mobile view display a single column with 20 products.<\/em><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong><em>Product Page<\/em><\/strong><\/h3>\n\n\n\n<p>Settings in this section always concern a single product page but can vary from theme to theme. For <strong>Storefront<\/strong>, these include whether the <em>Add to Cart <\/em>button sticks on the screen and if product pages should feature the <em>Previous\/Next Product<\/em> button navigation.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong><em>Product Images<\/em><\/strong><\/h3>\n\n\n\n<p>Use this section to set the aspect ratio of your product thumbnails. The default is 1:1 (square).&nbsp;<\/p>\n\n\n\n<p class=\"alert-blue\"><strong><em>Tip: <\/em><\/strong><em>After changing these, you will need to recreate the product thumbnails currently present. Use a plugin such as <\/em><a href=\"https:\/\/wordpress.org\/plugins\/regenerate-thumbnails\/\"><em>Regenerate Thumbnails<\/em><\/a><em>. It\u2019s free and available in the WordPress plugin repository.<\/em><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong><em>Checkout<\/em><\/strong><\/h3>\n\n\n\n<p>The Checkout page can have its fields toggled On or Off to fit your business model better. Use this section to set any of the following fields to <strong>Hidden, Optional<\/strong>, or <strong>Required<\/strong>:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Company Name<\/strong> \u2013 visible and optional by default<\/li><li><strong>Address Line 2<\/strong> \u2013 visible and optional by default<\/li><li><strong>Phone<\/strong> \u2013 required by default<\/li><\/ul>\n\n\n\n<p>Use the drop-down menus below these options to assign pages to the <strong>Privacy Policy <\/strong>and<strong> Terms and Conditions <\/strong>links on the checkout page.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Time to work on your WooCommerce storefront and make sure everything is nice and cozy for visitors to enjoy! The &#8230;<\/p>\n","protected":false},"author":106,"featured_media":62424,"comment_status":"open","ping_status":"closed","sticky":false,"template":"single-post-fa.php","format":"standard","meta":{"_acf_changed":false,"_seopress_robots_primary_cat":"none","_seopress_titles_title":"","_seopress_titles_desc":"","_seopress_robots_index":"","_seopress_analysis_target_kw":"","footnotes":""},"categories":[126],"tags":[],"class_list":["post-64610","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-woocommerce-hosting"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.scalahosting.com\/blog\/wp-json\/wp\/v2\/posts\/64610","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.scalahosting.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.scalahosting.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.scalahosting.com\/blog\/wp-json\/wp\/v2\/users\/106"}],"replies":[{"embeddable":true,"href":"https:\/\/www.scalahosting.com\/blog\/wp-json\/wp\/v2\/comments?post=64610"}],"version-history":[{"count":4,"href":"https:\/\/www.scalahosting.com\/blog\/wp-json\/wp\/v2\/posts\/64610\/revisions"}],"predecessor-version":[{"id":65120,"href":"https:\/\/www.scalahosting.com\/blog\/wp-json\/wp\/v2\/posts\/64610\/revisions\/65120"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.scalahosting.com\/blog\/wp-json\/wp\/v2\/media\/62424"}],"wp:attachment":[{"href":"https:\/\/www.scalahosting.com\/blog\/wp-json\/wp\/v2\/media?parent=64610"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.scalahosting.com\/blog\/wp-json\/wp\/v2\/categories?post=64610"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.scalahosting.com\/blog\/wp-json\/wp\/v2\/tags?post=64610"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}