{"id":37872,"date":"2022-11-03T07:00:36","date_gmt":"2022-11-03T14:00:36","guid":{"rendered":"https:\/\/dhblog.dream.press\/blog\/?p=37872"},"modified":"2025-05-21T16:36:55","modified_gmt":"2025-05-21T23:36:55","slug":"create-woocommerce-child-theme","status":"publish","type":"post","link":"https:\/\/www-dev.dreamhost.com\/blog\/create-woocommerce-child-theme\/","title":{"rendered":"How to Create a WooCommerce Child Theme"},"content":{"rendered":"\n<p>Let\u2019s say you have a <a href=\"https:\/\/wordpress.org\/plugins\/woocommerce\/\" target=\"_blank\" rel=\"noopener\">WooCommerce store<\/a> up and running.<\/p>\n\n\n\n<p>If you\u2019re using the official <a href=\"https:\/\/woocommerce.com\/storefront\/\" target=\"_blank\" rel=\"noopener\">Storefront theme<\/a>, it might even look quite professional. However, you may still want to customize the appearance of your WooCommerce store to match your vision.<\/p>\n\n\n\n<p>The best solution is often to create a WooCommerce <a href=\"https:\/\/www.dreamhost.com\/blog\/why-you-need-a-child-theme\/\" target=\"_blank\" rel=\"noopener\">child theme<\/a>. That\u2019s because a child theme enables you to make changes to your original theme without editing it directly. It simplifies the process of customizing your store\u2019s appearance and eliminates potential risks to your theme and store.<\/p>\n\n\n\n<p>In this article, we\u2019ll look at how you can style your WooCommerce store using themes. Then, we\u2019ll show you how to create your own child theme in just five steps. Let\u2019s get started!<\/p>\n\n\n\n<h2 id=\"h-a-quick-look-at-woocommerce-themes\" class=\"wp-block-heading\"><b>A Quick Look at WooCommerce Themes<\/b><\/h2>\n\n\n\n<p>With the launch of <a href=\"https:\/\/wordpress.org\/plugins\/woocommerce\/\" target=\"_blank\" rel=\"noopener\">the WooCommerce plugin<\/a> in 2011, WordPress became the most popular e-commerce platform. WooCommerce is currently used to power <a href=\"https:\/\/trends.builtwith.com\/shop\" target=\"_blank\" rel=\"noopener\">25% of all online stores<\/a>, making it 6% more popular than its closest competitor.<\/p>\n\n\n\n<p><style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }<\/style><\/p>\n\n\n\n<div class=\"embed-container\"><iframe data-src=\"https:\/\/www.youtube.com\/embed\/2TVJi7IpwxA\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" data-load-mode=\"1\"><\/iframe><\/div>\n\n\n\n<p>One of the elements that has made WooCommerce so successful is how easy it is to create a unique store with minimal effort. However, this alone doesn&#8217;t explain the platform\u2019s popularity.<\/p>\n\n\n\n<p>Another huge factor in WooCommerce\u2019s success is the nearly infinite customization possibilities it offers. When combined with the right theme, you have access to a lot of design flexibility.<\/p>\n\n\n\n<p>WooCommerce is compatible with almost all <a href=\"https:\/\/www.dreamhost.com\/blog\/how-to-find-wp-themes\/\" target=\"_blank\" rel=\"noopener\">WordPress themes<\/a>. However, most of them will not be optimized to handle the unique features of the plugin.<\/p>\n\n\n\n<p>Fortunately, <a href=\"https:\/\/woocommerce.com\/storefront\/\" target=\"_blank\" rel=\"noopener\">the Storefront theme<\/a> is an excellent option. This is the official WooCommerce theme, built specifically to integrate with the plugin. It looks compelling right out of the box, with a simple and clean design that puts the focus on your products:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"1200\" height=\"765\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/woocommerce-storefront-theme.jpg\" alt=\"the WooCommerce Storefront theme\" class=\"wp-image-37882 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/11\/woocommerce-storefront-theme.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/woocommerce-storefront-theme-300x191.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/woocommerce-storefront-theme-1024x653.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/woocommerce-storefront-theme-768x490.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/11\/woocommerce-storefront-theme-600x383.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/11\/woocommerce-storefront-theme-750x478.jpg.webp 750w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/woocommerce-storefront-theme-100x64.jpg 100w\" data-sizes=\"(max-width: 1200px) 100vw, 1200px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1200px; --smush-placeholder-aspect-ratio: 1200\/765;\" \/><\/figure><\/div>\n\n\n<p>This bare-bones design also makes Storefront an ideal base for customization. This is where child themes come in handy, which we\u2019ll look at next.<\/p>\n\n\n\n<h2 id=\"h-why-you-might-want-to-create-a-woocommerce-child-theme\" class=\"wp-block-heading\"><b>Why You Might Want to Create a WooCommerce Child Theme<\/b><\/h2>\n\n\n\n<p>If you\u2019ve spent much time reading up on WordPress, you\u2019ve probably come across child themes before.<\/p>\n\n\n\n<p>In short, a child theme starts life as a copy of another theme, which is known as the \u2018parent theme\u2019. You can then make changes to the child theme and test them out without editing the parent theme directly. This is important because altering the original theme can result in irreversible errors and even damage to your website.<\/p>\n\n\n\n<p>You might create a child theme because you want to use another theme as a basis, rather than having to build a new theme entirely from scratch. Alternatively, you may only want to make some minor changes to a theme\u2019s branding or overall aesthetic. The sky really is the limit, depending on how much time you\u2019re willing to devote to the project.<\/p>\n\n\n\n<p>When it comes to WooCommerce, most child themes are based on Storefront:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"1999\" height=\"1286\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/woocommerce-theme-store.jpg\" alt=\"Storefront child theme options in the official WooCommerce store\" class=\"wp-image-37883 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/11\/woocommerce-theme-store.jpg.webp 1999w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/woocommerce-theme-store-300x193.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/woocommerce-theme-store-1024x659.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/woocommerce-theme-store-768x494.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/woocommerce-theme-store-1536x988.jpg 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/11\/woocommerce-theme-store-600x386.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/11\/woocommerce-theme-store-750x482.jpg.webp 750w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/woocommerce-theme-store-100x64.jpg 100w\" data-sizes=\"(max-width: 1999px) 100vw, 1999px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1999px; --smush-placeholder-aspect-ratio: 1999\/1286;\" \/><\/figure><\/div>\n\n\n<p>You can download several child theme options from <a href=\"https:\/\/woocommerce.com\/product-category\/themes\/storefront-child-theme-themes\/\" target=\"_blank\" rel=\"noopener\">the official WooCommerce store<\/a> or from other <a href=\"https:\/\/themeforest.net\/category\/wordpress\/ecommerce\/woocommerce\" target=\"_blank\" rel=\"noopener\">sites like ThemeForest<\/a>. However, it\u2019s possible that none of the existing child themes offered match your needs, or you may simply want to create a unique look. What\u2019s more, you might not want to spend money on a premium theme if you feel you could do better yourself.<\/p>\n\n\n\n<p>In <a href=\"https:\/\/woocommerce.com\/2015\/07\/why-child-themes-matter\/\" target=\"_blank\" rel=\"noopener\">a post on the official WooCommerce blog<\/a>, the plugin\u2019s developers discuss the most common motivation behind using a child theme for your online store:<\/p>\n\n\n\n<p>\u201cThe aim with our own Storefront child themes is to deliver a store experience perfect for your own niche. After installing <a href=\"https:\/\/woocommerce.com\/products\/galleria\/\" target=\"_blank\" rel=\"noopener\">Galleria<\/a>, and not touching any settings, you instantly have a store fit to sell high-end fashion items. With <a href=\"https:\/\/woocommerce.com\/products\/proshop\/\" target=\"_blank\" rel=\"noopener\">ProShop<\/a>, you can rapidly set up a stylish sports store.\u201d<\/p>\n\n\n\n<p>The actual process of <a href=\"https:\/\/www.dreamhost.com\/blog\/install-wordpress-child-theme\/\" target=\"_blank\" rel=\"noopener\">creating a child theme<\/a> is the same whether you\u2019re making one specifically for WooCommerce or for a more general WordPress site. However, you will need to keep your store\u2019s purpose in mind as you customize your child theme. An e-commerce site requires a different design philosophy than a blog, after all. Let\u2019s see what this process looks like in practice!<\/p>\n\n\n\n<h2 id=\"h-how-to-create-a-woocommerce-child-theme-in-5-steps\" class=\"wp-block-heading\"><b>How to Create a WooCommerce Child Theme (In 5 Steps)<\/b><\/h2>\n\n\n\n<p>Now, we\u2019re going to walk you through how to create a WooCommerce child theme. In this example, we\u2019ll create a basic theme that uses Storefront as its parent, although you can use any theme as a base.<\/p>\n\n\n\n<p>We\u2019ll show you how the process works when starting from scratch. However, if you want to skip some of these steps and get straight to customizing your site, you can also download and install a <a href=\"https:\/\/github.com\/stuartduff\/storefront-child-theme\" target=\"_blank\" rel=\"noopener\">sample Storefront child theme<\/a>.<\/p>\n\n\n\n<p>Finally, we highly recommend <a href=\"https:\/\/www.dreamhost.com\/blog\/back-up-wordpress-website\/\" target=\"_blank\" rel=\"noopener\">creating a backup of your site<\/a> before you proceed any further. This will keep your store safe if something breaks during the development process.<\/p>\n\n\n\n<p>It\u2019s also smart to <a href=\"https:\/\/www.dreamhost.com\/blog\/website-staging-beginners-guide\/\" target=\"_blank\" rel=\"noopener\">use a staging environment<\/a> for creating and tweaking your child theme. Once you\u2019ve taken these security precautions, you can proceed to the first step!<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-step-1-make-a-folder-for-your-woocommerce-child-theme\"><b>Step 1: Make a Folder for Your WooCommerce Child Theme<\/b><\/h3>\n\n\n\n<p>The first thing you\u2019ll need to do is to create the folder that will contain your theme. If you\u2019re adding the child theme directly to an existing site, the best way to do this is <a href=\"https:\/\/help.dreamhost.com\/hc\/en-us\/articles\/115000675027\" target=\"_blank\" rel=\"noopener\">via SFTP<\/a>. You can do this using a free application like <a href=\"https:\/\/filezilla-project.org\/\" target=\"_blank\" rel=\"noopener\">FileZilla<\/a>.<\/p>\n\n\n\n<p>Once you have the program up and running, log in to your site with your hosting credentials. Then, you\u2019ll need to navigate to the <i>wp-content\/themes\/<\/i> folder. This is where your site\u2019s themes are installed.<\/p>\n\n\n\n<p>All you need to do is create a new folder within this one:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"1086\" height=\"488\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/wordpress-themes-folder-via-ftp.png\" alt=\"the WordPress themes folder in FTP client\" class=\"wp-image-37886 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/11\/wordpress-themes-folder-via-ftp.png.webp 1086w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/wordpress-themes-folder-via-ftp-300x135.png 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/wordpress-themes-folder-via-ftp-1024x460.png 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/wordpress-themes-folder-via-ftp-768x345.png 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/11\/wordpress-themes-folder-via-ftp-600x270.png.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/11\/wordpress-themes-folder-via-ftp-750x337.png.webp 750w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/wordpress-themes-folder-via-ftp-100x45.png 100w\" data-sizes=\"(max-width: 1086px) 100vw, 1086px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1086px; --smush-placeholder-aspect-ratio: 1086\/488;\" \/><\/figure><\/div>\n\n\n<p>When creating a child theme, it\u2019s best to give it a name that reflects the parent. For example, we\u2019re making a child theme for Storefront, so we\u2019ll name our folder \u201cstorefront-child.\u201d<\/p>\n\n\n\n<p>The first thing you\u2019ll need to create and place in this folder is a simple text file called <a href=\"https:\/\/www.dreamhost.com\/blog\/guide-to-wp-functions\/\" target=\"_blank\" rel=\"noopener\"><i>functions.php<\/i><\/a>. This is an important core file that helps to dictate how your site looks and acts. However, most <a href=\"https:\/\/developer.wordpress.org\/themes\/advanced-topics\/child-themes\/\" target=\"_blank\" rel=\"noopener\">child themes can use the functions<\/a> contained in the parent theme\u2019s file and don\u2019t need their own.<\/p>\n\n\n\n<p>For that reason, this file can be left blank for now. Simply create a text file with the name <i>functions.php<\/i>, and save it in your child theme\u2019s folder:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"1108\" height=\"564\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/wordpress-child-theme-location-via-ftp-client.png\" alt=\"WordPress child theme location in FTP client\" class=\"wp-image-37884 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/11\/wordpress-child-theme-location-via-ftp-client.png.webp 1108w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/wordpress-child-theme-location-via-ftp-client-300x153.png 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/wordpress-child-theme-location-via-ftp-client-1024x521.png 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/wordpress-child-theme-location-via-ftp-client-768x391.png 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/11\/wordpress-child-theme-location-via-ftp-client-600x305.png.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/11\/wordpress-child-theme-location-via-ftp-client-750x382.png.webp 750w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/wordpress-child-theme-location-via-ftp-client-100x51.png 100w\" data-sizes=\"(max-width: 1108px) 100vw, 1108px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1108px; --smush-placeholder-aspect-ratio: 1108\/564;\" \/><\/figure><\/div>\n\n\n<p>Your theme is now almost ready to be activated and used. First, however, it will need a stylesheet.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-step-2-create-your-child-theme-s-stylesheet\"><b>Step 2: Create Your Child Theme\u2019s Stylesheet<\/b><\/h3>\n\n\n\n<p>The next file you need to create is your theme\u2019s <a href=\"https:\/\/wordpress.org\/support\/article\/css\/\" target=\"_blank\" rel=\"noopener\">Cascading Style Sheet (CSS)<\/a>. This file defines the styles that will be applied to your site&#8217;s pages and content. In other words, it enables you to specify the look of individual elements on your website. When people talk about updating styles, they\u2019re usually referring to updating a site\u2019s CSS file.<\/p>\n\n\n\n<p>Your parent theme will already contain a stylesheet, but a child theme\u2019s CSS can be used to override those styles. We\u2019ll look at how exactly this works later on.<\/p>\n\n\n\n<p>For now, you\u2019ll just need to create the CSS file. To do this, once again add a text file to your <i>wp-content\/themes\/storefront-child<\/i> folder (or whatever name you used for your own child theme). This one should be called <i>style.css<\/i>:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"864\" height=\"450\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/wordpress-child-theme.png\" alt=\"WordPress child theme location in FTP client\" class=\"wp-image-37885 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/11\/wordpress-child-theme.png.webp 864w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/wordpress-child-theme-300x156.png 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/wordpress-child-theme-768x400.png 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/11\/wordpress-child-theme-600x313.png.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/11\/wordpress-child-theme-750x391.png.webp 750w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/wordpress-child-theme-100x52.png 100w\" data-sizes=\"(max-width: 864px) 100vw, 864px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 864px; --smush-placeholder-aspect-ratio: 864\/450;\" \/><\/figure><\/div>\n\n\n<p>You\u2019ll also need to add some basic information. Copy and paste the following snippet into your new <i>style.css<\/i> file:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">\/*\nTheme Name: Storefront Child\nTheme URI: http:\/\/example.com\/storefront-child\/\nDescription: My first WooCommerce child theme\nAuthor: Your Name\nAuthor URI: http:\/\/example.com\nVersion: 1.0.0\nLicense: GNU General Public License v2 or later\nLicense URI: http:\/\/www.gnu.org\/licenses\/gpl-2.0.html\n*\/<\/pre>\n\n\n\n<p>These are the details about your theme that you\u2019ll see when viewing it in a theme directory or in your WordPress dashboard. Feel free to replace the placeholder data with information more specific to you and your theme.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-step-3-configure-the-child-theme-to-inherit-the-parent-theme-s-styles\"><b>Step 3: Configure the Child Theme to Inherit the Parent Theme\u2019s Styles<\/b><\/h3>\n\n\n\n<p>As we\u2019ve already mentioned, you\u2019ll want your child theme to use the parent theme\u2019s default styles. However, you&#8217;ll also need to override the styles you want to change. This might sound complex \u2014 and <a href=\"https:\/\/www.dreamhost.com\/blog\/why-you-should-still-learn-css\/\" target=\"_blank\" rel=\"noopener\">CSS can indeed get tricky<\/a> \u2014&nbsp; but at its core, the child will always use the parent theme\u2019s styles unless it specifically contains a replacement.<\/p>\n\n\n\n<p>For example, let\u2019s say your parent theme defines the style for h1 header elements as 20px and red. If the child\u2019s <i>style.css<\/i> file does not contain an entry for H1 headers, then the parent style will be applied to all H1 content. However, if we were to add an H1 style to the child\u2019s stylesheet that defined these headings as 18px and blue, it would override the parent\u2019s directions.<\/p>\n\n\n\n<p>Adding this functionality to your child theme is actually very simple. All you need to do is to reference your parent theme in your child\u2019s stylesheet.<\/p>\n\n\n\n<p>Simply add the following snippet after the information you pasted into the <i>style.css<\/i> file earlier:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">Template: storefront<\/pre>\n\n\n\n<p>This code defines the parent theme and will ensure your child theme uses Storefront\u2019s styles wherever you have not specified a replacement. If you\u2019re creating a child for a different theme, you can simply use its folder\u2019s name instead.<\/p>\n\n\n\n<div class=\"article-newsletter article-newsletter--gradient\">\n\n\n<h2>Get Content Delivered Straight to Your Inbox<\/h2><p>Subscribe now to receive all the latest updates, delivered directly to your inbox.<\/p><form class=\"nwsl-form\" id=\"newsletter_block_\" novalidate><div class=\"messages\"><\/div><div class=\"form-group\"><label for=\"input_newsletter_block_\"><input type=\"email\"name=\"email\"id=\"input_newsletter_block_\"placeholder=\"Enter your email address\"novalidatedisabled=\"disabled\"\/><\/label><button type=\"submit\"class=\"btn btn--brand\"disabled=\"disabled\"><span>Sign Me Up!<\/span><svg width=\"21\" height=\"14\" viewBox=\"0 0 21 14\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n<path d=\"M13.8523 0.42524L12.9323 1.34521C12.7095 1.56801 12.7132 1.9304 12.9404 2.14865L16.7241 5.7823H0.5625C0.251859 5.7823 0 6.03416 0 6.3448V7.6573C0 7.96794 0.251859 8.2198 0.5625 8.2198H16.7241L12.9405 11.8535C12.7132 12.0717 12.7095 12.4341 12.9323 12.6569L13.8523 13.5769C14.072 13.7965 14.4281 13.7965 14.6478 13.5769L20.8259 7.39879C21.0456 7.17913 21.0456 6.82298 20.8259 6.60327L14.6477 0.42524C14.4281 0.205584 14.0719 0.205584 13.8523 0.42524Z\" fill=\"white\"\/>\n<\/svg>\n<\/button><\/div><\/form><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-step-4-activate-the-child-theme\"><b>Step 4: Activate the Child Theme<\/b><\/h3>\n\n\n\n<p>At this point, your child theme is now technically ready. It\u2019s configured to work on your site, so let\u2019s activate it and see how it looks.<\/p>\n\n\n\n<p>Go to <i>Appearance &gt; Themes<\/i> in your WordPress dashboard, and you\u2019ll see your child theme already installed:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"1200\" height=\"408\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/woocommerce-child-theme.jpg\" alt=\"activating your WooCommerce child theme in WordPress\" class=\"wp-image-37881 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/11\/woocommerce-child-theme.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/woocommerce-child-theme-300x102.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/woocommerce-child-theme-1024x348.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/woocommerce-child-theme-768x261.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/11\/woocommerce-child-theme-600x204.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/11\/woocommerce-child-theme-750x255.jpg.webp 750w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/woocommerce-child-theme-100x34.jpg 100w\" data-sizes=\"(max-width: 1200px) 100vw, 1200px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1200px; --smush-placeholder-aspect-ratio: 1200\/408;\" \/><\/figure><\/div>\n\n\n<p>Select <i>Activate<\/i> to make it your site\u2019s current theme. You can now preview it from the front end:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"1200\" height=\"630\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/woocommerce-child-theme-preview-store.jpg\" alt=\"editing your WooCommerce child theme\" class=\"wp-image-37879 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/11\/woocommerce-child-theme-preview-store.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/woocommerce-child-theme-preview-store-300x158.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/woocommerce-child-theme-preview-store-1024x538.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/woocommerce-child-theme-preview-store-768x403.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/11\/woocommerce-child-theme-preview-store-600x315.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/11\/woocommerce-child-theme-preview-store-750x394.jpg.webp 750w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/woocommerce-child-theme-preview-store-100x53.jpg 100w\" data-sizes=\"(max-width: 1200px) 100vw, 1200px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1200px; --smush-placeholder-aspect-ratio: 1200\/630;\" \/><\/figure><\/div>\n\n\n<p>As you can see, it looks exactly the same as the original theme right now. While the child theme is active, all it\u2019s doing is pulling in the styles from your parent theme. To customize its appearance, you\u2019ll need to get creative with your child theme\u2019s stylesheet.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-step-5-add-styles-to-the-child-theme\"><b>Step 5: Add Styles to the Child Theme<\/b><\/h3>\n\n\n\n<p>Finally, it\u2019s time to start styling your child theme. Exactly how you do this is up to you, your creativity, and what you want your store to look like. However, let\u2019s walk through an example of what you can do.<\/p>\n\n\n\n<p>To illustrate how editing your child theme works, we\u2019ll change the look of our store\u2019s buttons. At the moment, they appear gray with black text, but we could update this styling to make them stand out more:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"1200\" height=\"530\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/woocommerce-child-theme-preview.jpg\" alt=\"editing your WooCommerce child theme\" class=\"wp-image-37880 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/11\/woocommerce-child-theme-preview.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/woocommerce-child-theme-preview-300x133.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/woocommerce-child-theme-preview-1024x452.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/woocommerce-child-theme-preview-768x339.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/11\/woocommerce-child-theme-preview-600x265.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/11\/woocommerce-child-theme-preview-750x331.jpg.webp 750w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/woocommerce-child-theme-preview-100x44.jpg 100w\" data-sizes=\"(max-width: 1200px) 100vw, 1200px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1200px; --smush-placeholder-aspect-ratio: 1200\/530;\" \/><\/figure><\/div>\n\n\n<p>Open your child theme\u2019s <i>style.css<\/i> file again, and add the following code after the last <i>*\/<\/i> in the file\u2019s header:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">a.button,\nbutton.button,\ninput.button,\n#review_form #submit {\nbackground: pink;\ncolor: red;\n}<\/pre>\n\n\n\n<p>If you save your file and view it on the front end now, you\u2019ll see the change in action. The buttons will now be a vibrant pink with red text:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"1200\" height=\"532\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/editing-woocommerce-child-theme.jpg\" alt=\"editing your WooCommerce child theme\" class=\"wp-image-37878 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/11\/editing-woocommerce-child-theme.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/editing-woocommerce-child-theme-300x133.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/editing-woocommerce-child-theme-1024x454.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/editing-woocommerce-child-theme-768x340.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/11\/editing-woocommerce-child-theme-600x266.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/11\/editing-woocommerce-child-theme-750x333.jpg.webp 750w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/editing-woocommerce-child-theme-100x44.jpg 100w\" data-sizes=\"(max-width: 1200px) 100vw, 1200px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1200px; --smush-placeholder-aspect-ratio: 1200\/532;\" \/><\/figure><\/div>\n\n\n<p>You can also make changes to your <a href=\"https:\/\/www.dreamhost.com\/blog\/wordpress-templates-template-parts\/\" target=\"_blank\" rel=\"noopener\">theme\u2019s template files<\/a>. You\u2019ll just need to copy the template file you want to alter, such as <i>header.php<\/i>, from your parent to your child theme folder.<\/p>\n\n\n\n<p>However, you\u2019ll also need to make some changes to specify which function WordPress uses to <a href=\"https:\/\/developer.wordpress.org\/themes\/advanced-topics\/child-themes\/#adding-template-files\" target=\"_blank\" rel=\"noopener\">reference the template files<\/a>. This requires using the <span style=\"font-family: 'courier new', courier, monospace;\">get_stylesheet_directory();<\/span> function instead of <span style=\"font-family: 'courier new', courier, monospace;\">get_template_directory()<\/span> to reference your templates.<\/p>\n\n\n\n<p>To learn more about how to do this, you can read about all the <a href=\"https:\/\/docs.woocommerce.com\/document\/template-structure\/\" target=\"_blank\" rel=\"noopener\">templates that WooCommerce uses<\/a>.<\/p>\n\n\n\n<p>At this point, you have created a WooCommerce child theme! Of course, there\u2019s plenty more you can do, but you now know how to start tinkering. We recommend you <a href=\"https:\/\/www.dreamhost.com\/blog\/learn-css\/\" target=\"_blank\" rel=\"noopener\">brush up on CSS<\/a> to get the most out of your styling!<\/p>\n\n\n\n<h2 id=\"h-create-a-woocommerce-child-theme\" class=\"wp-block-heading\"><b>Create a WooCommerce Child Theme<\/b><\/h2>\n\n\n\n<p><a href=\"https:\/\/wordpress.org\/plugins\/woocommerce\/\" target=\"_blank\" rel=\"noopener\">WooCommerce<\/a> makes it easy to create an online store, and you can even change its look using <a href=\"https:\/\/woocommerce.com\/storefront\/\" target=\"_blank\" rel=\"noopener\">the Storefront theme<\/a> or one of many <a href=\"https:\/\/themeforest.net\/category\/wordpress\/ecommerce\/woocommerce\" target=\"_blank\" rel=\"noopener\">custom themes<\/a>.<\/p>\n\n\n\n<p>However, you don\u2019t have to rely on the creativity of others. Creating your own WooCommerce child theme is not as difficult as you might think, and it gives you nearly total control over the look and functionality of your store.<\/p>\n\n\n\n<p>Happy selling!<\/p>\n\n\n\n\n\n<div\n\tclass=\"article-cta-shared article-cta-small\"\n>\n    <div class=\"tr-img-wrap-outer jsLoading\"><img decoding=\"async\" class=\"js-img-lazy \" src=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/themes\/blog2018\/assets\/img\/lazy-loading-transparent.webp\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/themes\/blog2018\/assets\/img\/article-small-ad-cta-placeholder.webp 1x, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/themes\/blog2018\/assets\/img\/article-small-ad-cta-placeholder-x2.webp 2x\"  alt=\"Ad background image\" \/><\/div>\n\n\n\n\n  <div class=\"content-btm\">\n    <h2\n      class=\"h2--md\"\n    >\n      Your Store Deserves WooCommerce Hosting\n    <\/h2>\n    <p\n      class=\"p--md\"\n    >\n      Sell anything, anywhere, anytime on the world&#8217;s biggest eCommerce platform.\n    <\/p>\n\n            <a\n            href=\"https:\/\/www.dreamhost.com\/wordpress\/woocommerce-hosting\/\"\n                        class=\"btn btn--white-outline btn--sm btn--round\"\n                                    target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            >\n                            See Plans                    <\/a>\n\n  <\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Let\u2019s say you have a WooCommerce store up and running. If you\u2019re using the official Storefront theme, it might even look quite professional. However, you may still want to customize the appearance of your WooCommerce store to match your vision. The best solution is often to create a WooCommerce child theme. That\u2019s because a child [&hellip;]<\/p>\n","protected":false},"author":1062,"featured_media":37875,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_yoast_wpseo_metadesc":"WooCommerce child themes allow you to customize your WordPress online store by creating a copy of a parent theme. Learn more!","toc_headlines":"[[\"h-a-quick-look-at-woocommerce-themes\",\"<b>A Quick Look at WooCommerce Themes<\/b>\"],[\"h-why-you-might-want-to-create-a-woocommerce-child-theme\",\"<b>Why You Might Want to Create a WooCommerce Child Theme<\/b>\"],[\"h-how-to-create-a-woocommerce-child-theme-in-5-steps\",\"<b>How to Create a WooCommerce Child Theme (In 5 Steps)<\/b>\"],[\"h-create-a-woocommerce-child-theme\",\"<b>Create a WooCommerce Child Theme<\/b>\"]]","hide_toc":false,"footnotes":""},"categories":[13131,550,696],"tags":[],"class_list":["post-37872","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ecommerce","category-tutorials","category-wordpress"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v26.3 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>How to Create a WooCommerce Child Theme - DreamHost<\/title>\n<meta name=\"description\" content=\"WooCommerce child themes allow you to customize your WordPress online store by creating a copy of a parent theme. Learn more!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www-dev.dreamhost.com\/blog\/create-woocommerce-child-theme\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Create a WooCommerce Child Theme\" \/>\n<meta property=\"og:description\" content=\"WooCommerce child themes allow you to customize your WordPress online store by creating a copy of a parent theme. Learn more!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www-dev.dreamhost.com\/blog\/create-woocommerce-child-theme\/\" \/>\n<meta property=\"og:site_name\" content=\"DreamHost Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/DreamHost\/\" \/>\n<meta property=\"article:published_time\" content=\"2022-11-03T14:00:36+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-05-21T23:36:55+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/WooCommerce-Child-Themes-Social.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"628\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Jason Cosper\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@dreamhost\" \/>\n<meta name=\"twitter:site\" content=\"@dreamhost\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jason Cosper\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"11 minutes\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to Create a WooCommerce Child Theme - DreamHost","description":"WooCommerce child themes allow you to customize your WordPress online store by creating a copy of a parent theme. Learn more!","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www-dev.dreamhost.com\/blog\/create-woocommerce-child-theme\/","og_locale":"en_US","og_type":"article","og_title":"How to Create a WooCommerce Child Theme","og_description":"WooCommerce child themes allow you to customize your WordPress online store by creating a copy of a parent theme. Learn more!","og_url":"https:\/\/www-dev.dreamhost.com\/blog\/create-woocommerce-child-theme\/","og_site_name":"DreamHost Blog","article_publisher":"https:\/\/www.facebook.com\/DreamHost\/","article_published_time":"2022-11-03T14:00:36+00:00","article_modified_time":"2025-05-21T23:36:55+00:00","og_image":[{"width":1200,"height":628,"url":"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/WooCommerce-Child-Themes-Social.jpg","type":"image\/jpeg"}],"author":"Jason Cosper","twitter_card":"summary_large_image","twitter_creator":"@dreamhost","twitter_site":"@dreamhost","twitter_misc":{"Written by":"Jason Cosper","Est. reading time":"11 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www-dev.dreamhost.com\/blog\/create-woocommerce-child-theme\/#article","isPartOf":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/create-woocommerce-child-theme\/"},"author":{"name":"Jason Cosper","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/person\/2273b8bf7336df78f6d99a89c17253c4"},"headline":"How to Create a WooCommerce Child Theme","datePublished":"2022-11-03T14:00:36+00:00","dateModified":"2025-05-21T23:36:55+00:00","mainEntityOfPage":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/create-woocommerce-child-theme\/"},"wordCount":1997,"publisher":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#organization"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/create-woocommerce-child-theme\/#primaryimage"},"thumbnailUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/WooCommerce-Child-Themes-Feature.jpg","articleSection":["Selling Online","Tutorials","WordPress"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www-dev.dreamhost.com\/blog\/create-woocommerce-child-theme\/","url":"https:\/\/www-dev.dreamhost.com\/blog\/create-woocommerce-child-theme\/","name":"How to Create a WooCommerce Child Theme - DreamHost","isPartOf":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/create-woocommerce-child-theme\/#primaryimage"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/create-woocommerce-child-theme\/#primaryimage"},"thumbnailUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/WooCommerce-Child-Themes-Feature.jpg","datePublished":"2022-11-03T14:00:36+00:00","dateModified":"2025-05-21T23:36:55+00:00","description":"WooCommerce child themes allow you to customize your WordPress online store by creating a copy of a parent theme. Learn more!","breadcrumb":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/create-woocommerce-child-theme\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www-dev.dreamhost.com\/blog\/create-woocommerce-child-theme\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/create-woocommerce-child-theme\/#primaryimage","url":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/WooCommerce-Child-Themes-Feature.jpg","contentUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/WooCommerce-Child-Themes-Feature.jpg","width":900,"height":598,"caption":"how to create a WooCommerce child theme"},{"@type":"BreadcrumbList","@id":"https:\/\/www-dev.dreamhost.com\/blog\/create-woocommerce-child-theme\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/dhblog.dream.press\/blog\/"},{"@type":"ListItem","position":2,"name":"How to Create a WooCommerce Child Theme"}]},{"@type":"WebSite","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#website","url":"https:\/\/www-dev.dreamhost.com\/blog\/","name":"DreamHost Blog","description":"","publisher":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www-dev.dreamhost.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#organization","name":"DreamHost","url":"https:\/\/www-dev.dreamhost.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/dhblog.dream.press\/blog\/wp-content\/uploads\/2019\/01\/dh_logo-blue-2.png","contentUrl":"https:\/\/dhblog.dream.press\/blog\/wp-content\/uploads\/2019\/01\/dh_logo-blue-2.png","width":1200,"height":168,"caption":"DreamHost"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/DreamHost\/","https:\/\/x.com\/dreamhost","https:\/\/www.instagram.com\/dreamhost\/","https:\/\/www.linkedin.com\/company\/dreamhost\/","https:\/\/www.youtube.com\/user\/dreamhostusa"]},{"@type":"Person","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/person\/2273b8bf7336df78f6d99a89c17253c4","name":"Jason Cosper","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/02\/IMG_4807-scaled.jpeg","url":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/02\/IMG_4807-scaled.jpeg","contentUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/02\/IMG_4807-scaled.jpeg","caption":"Jason Cosper"},"description":"Jason is DreamHost\u2019s WordPress Product Advocate, based out of Bakersfield, CA. He is currently working on making our DreamPress product even better. In his free time, he likes to curl up on the couch and watch scary movies with his wife Sarah and three very small dogs. Follow him on Twitter.","url":"https:\/\/www-dev.dreamhost.com\/blog\/author\/jasoncosper\/"}]}},"lang":"en","translations":{"en":37872,"es":37888,"pl":52883,"de":54934,"uk":54949,"ru":55033,"pt":55065,"it":67883,"fr":69356,"nl":69388},"pll_sync_post":[],"_links":{"self":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/37872","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/users\/1062"}],"replies":[{"embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/comments?post=37872"}],"version-history":[{"count":8,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/37872\/revisions"}],"predecessor-version":[{"id":61502,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/37872\/revisions\/61502"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/media\/37875"}],"wp:attachment":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/media?parent=37872"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/categories?post=37872"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/tags?post=37872"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}