{"id":37888,"date":"2022-11-03T07:00:25","date_gmt":"2022-11-03T14:00:25","guid":{"rendered":"https:\/\/dhblog.dream.press\/blog\/?p=37888"},"modified":"2025-01-16T13:04:11","modified_gmt":"2025-01-16T21:04:11","slug":"crear-un-tema-hijo-child-woocommerce","status":"publish","type":"post","link":"https:\/\/www-dev.dreamhost.com\/blog\/es\/crear-un-tema-hijo-child-woocommerce\/","title":{"rendered":"C\u00f3mo Crear Un Tema Hijo (Child) De WooCommerce"},"content":{"rendered":"\n<p><span style=\"font-weight: 400;\">Digamos que tienes una <\/span><a href=\"https:\/\/wordpress.org\/plugins\/woocommerce\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">tienda WooCommerce<\/span><\/a><span style=\"font-weight: 400;\"> funcionando en l\u00ednea.&nbsp;<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Si est\u00e1s usando el <\/span><a href=\"https:\/\/woocommerce.com\/es-es\/storefront\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">tema oficial de Storefront<\/span><\/a><span style=\"font-weight: 400;\">, puede verse bastante profesional. Sin embargo, puede que a\u00fan quieras personalizar la apariencia de tu tienda WooCommerce para que se ajuste a lo que deseas.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">La mejor soluci\u00f3n es originar un <\/span><a href=\"https:\/\/www.dreamhost.com\/blog\/es\/como-crear-un-tema-hijo-wordpress\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">tema child<\/span><\/a><span style=\"font-weight: 400;\"> de WooCommerce. Esto se debe a que un tema child te permitir\u00e1 hacer cambios en tu tema original sin que debas editarlo directamente. Simplificar\u00e1 el proceso de personalizaci\u00f3n de la apariencia de tu tienda y eliminar\u00e1 riesgos potenciales para tu tema y tienda en s\u00ed.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">En este art\u00edculo veremos c\u00f3mo puedes darte estilo a tu tienda WooCommerce mediante el uso de los temas. Y luego, te mostraremos c\u00f3mo crear tu propio tema child en tan solo 5 pasos \u00a1Empecemos!<\/span><\/p>\n\n\n\n<h2 id=\"h-una-vista-rapida-a-los-temas-de-woocommerce\" class=\"wp-block-heading\"><b>Una Vista R\u00e1pida A Los Temas de WooCommerce<\/b><\/h2>\n\n\n\n<p><span style=\"font-weight: 400;\">Con el lanzamiento del <\/span><a href=\"https:\/\/es.wordpress.org\/plugins\/woocommerce\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">plugin de WooCommerce <\/span><\/a><span style=\"font-weight: 400;\">en el 2011, WordPress se convirti\u00f3 en la plataforma de e-commerce m\u00e1s popular. WooCommerce hoy en d\u00eda impulsa un <\/span><a href=\"https:\/\/trends.builtwith.com\/shop\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">25% de todas las tiendas en l\u00ednea<\/span><\/a><span style=\"font-weight: 400;\">, haciendo que sea un 6% m\u00e1s popular que su competidor m\u00e1s cercano.<\/span><\/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\/J5r2madguWc\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" data-load-mode=\"1\"><\/iframe><\/div>\n\n\n\n<p><span style=\"font-weight: 400;\">Una de las razones por la cual WooCommerce es tan exitoso, es lo f\u00e1cil que es crear una tienda \u00fanica y asombrosa, sin tanto esfuerzo. Sin embargo, esto no explica la popularidad de la plataforma.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Otro de los grandes factores del \u00e9xito de WooCommerce es la casi infinita cantidad de opciones de personalizaci\u00f3n que ofrece. Cuando las combinas con el tema correcto, te dar\u00e1n acceso a una gran flexibilidad de dise\u00f1o.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">WooCommerce es compatible con casi todos los <\/span><a href=\"https:\/\/www.dreamhost.com\/blog\/es\/como-encontrar-temas-wordpress\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">temas de WordPress<\/span><\/a><span style=\"font-weight: 400;\">. Sin embargo, muchos de ellos no estar\u00e1n optimizados para manejar las caracter\u00edsticas \u00fanicas del plugin.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Afortunadamente, el <\/span><a href=\"https:\/\/woocommerce.com\/es-es\/storefront\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">tema Storefront<\/span><\/a><span style=\"font-weight: 400;\"> es una excelente opci\u00f3n. Este es el tema oficial de WooCommerce; construido espec\u00edficamente para ser integrado con el plugin. Se ver\u00e1 atractivo desde el inicio, con un dise\u00f1o limpio y simple que pondr\u00e1 el foco directamente en tus productos:<\/span><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"900\" height=\"574\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/tema-woocommerce-storefront-tienda-en-linea.jpg\" alt=\"Tema para tiendas en l\u00ednea de WooCommerce, Frontstore\" class=\"wp-image-37890 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/11\/tema-woocommerce-storefront-tienda-en-linea.jpg.webp 900w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/tema-woocommerce-storefront-tienda-en-linea-300x191.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/tema-woocommerce-storefront-tienda-en-linea-768x490.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/11\/tema-woocommerce-storefront-tienda-en-linea-600x383.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/11\/tema-woocommerce-storefront-tienda-en-linea-750x478.jpg.webp 750w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/tema-woocommerce-storefront-tienda-en-linea-100x64.jpg 100w\" data-sizes=\"(max-width: 900px) 100vw, 900px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 900px; --smush-placeholder-aspect-ratio: 900\/574;\" \/><\/figure><\/div>\n\n\n<p><span style=\"font-weight: 400;\">Esta estructura de dise\u00f1o tambi\u00e9n hace que Storefront sea una base ideal para la personalizaci\u00f3n de tiendas en l\u00ednea. Aqu\u00ed es cuando los temas child resultan m\u00e1s \u00fatiles, aspecto que veremos a continuaci\u00f3n.<\/span><\/p>\n\n\n\n<h2 id=\"h-cuando-deberias-pensar-en-crear-un-tema-child-de-woocommerce\" class=\"wp-block-heading\"><b>Cu\u00e1ndo Deber\u00edas Pensar En Crear Un Tema Child de WooCommerce<\/b><\/h2>\n\n\n\n<p><span style=\"font-weight: 400;\">Si pasas mucho tiempo investigando sobre WordPress, posiblemente ya conoces algo sobre los temas child.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Para resumir, un tema child inicia como una copia de otro tema \u2018principal\u2019 o principal. Luego, puedes hacer cambios y probarlos directamente en el tema child, sin necesidad de afectar el tema principal. Esto es muy importante, porque alterarlo podr\u00eda llevarte a errores irreversibles y hasta a da\u00f1ar tu sitio web.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Puedes crear un tema child, tambi\u00e9n, porque deseas usar otro tema como base, sin tener que empezar completamente desde cero. Alternativamente, puedes hacer solo algunos cambios menores a los componentes gr\u00e1ficos de un tema, o a la est\u00e9tica en general. En esto, el cielo es realmente el l\u00edmite. Todo depende de ti y cu\u00e1nto tiempo est\u00e9s dispuesto a invertir en este proyecto.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Cuando se trata de WooCommerce, muchos temas child se basan en Storefront:<\/span><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"900\" height=\"579\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/temas-child-woocommerce.jpg\" alt=\"Opciones de temas child de Storefront en la tienda oficial de WooCommerce.\" class=\"wp-image-37891 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/11\/temas-child-woocommerce.jpg.webp 900w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/temas-child-woocommerce-300x193.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/temas-child-woocommerce-768x494.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/11\/temas-child-woocommerce-600x386.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/11\/temas-child-woocommerce-750x483.jpg.webp 750w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/temas-child-woocommerce-100x64.jpg 100w\" data-sizes=\"(max-width: 900px) 100vw, 900px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 900px; --smush-placeholder-aspect-ratio: 900\/579;\" \/><\/figure><\/div>\n\n\n<p><span style=\"font-weight: 400;\">Puedes descargar varias opciones de temas child desde la <\/span><a href=\"https:\/\/woocommerce.com\/es-es\/product-category\/themes\/storefront-child-theme-themes\/?categoryIds=1450&amp;collections=theme&amp;page=1\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">tienda oficial de WooCommerce<\/span><\/a><span style=\"font-weight: 400;\"> o desde otros <\/span><a href=\"https:\/\/themeforest.net\/category\/wordpress\/ecommerce\/woocommerce\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">sitios como ThemeForest.<\/span><\/a><span style=\"font-weight: 400;\"> Sin embargo, es posible que ninguno de los temas child existentes cumpla con todas tus expectativas y necesidades, o que simplemente desees una apariencia nunca antes vista. Es m\u00e1s, puede que no desees gastar dinero en un tema premium, cuando sabes que a ti te podr\u00eda quedar mejor si lo haces bajo tus par\u00e1metros.&nbsp;<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">En <\/span><a href=\"https:\/\/woocommerce.com\/es-es\/posts\/why-child-themes-matter\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">un post del blog oficial de WooCommerce<\/span><\/a><span style=\"font-weight: 400;\">, los desarrolladores de este plugin discutieron algunas de las motivaciones m\u00e1s comunes al usar temas child en tiendas en l\u00ednea:<\/span><\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><span style=\"font-weight: 400;\">\u201cEl objetivo de nuestros propios temas child de Storefront es garantizar una experiencia de tienda que sea perfecta para tu propio nicho. Luego de instalar <\/span><a href=\"https:\/\/woocommerce.com\/es-es\/products\/galleria\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">Galleria<\/span><\/a><span style=\"font-weight: 400;\"> y no alterar ninguna configuraci\u00f3n, instant\u00e1neamente tendr\u00e1s una tienda lista para vender art\u00edculos de alto dise\u00f1o. Con <\/span><a href=\"https:\/\/woocommerce.com\/es-es\/products\/proshop\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">ProShop<\/span><\/a><span style=\"font-weight: 400;\">, por otro lado, podr\u00e1s configurar r\u00e1pidamente una tienda deportiva con mucho estilo\u201d.<\/span><\/p>\n\n\n<\/blockquote>\n\n\n\n<p><span style=\"font-weight: 400;\">El proceso actual para <\/span><a href=\"https:\/\/www.dreamhost.com\/blog\/es\/instalar-tema-child-wordpress\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">crear un tema child<\/span><\/a><span style=\"font-weight: 400;\"> es el mismo que cuando est\u00e1s creando uno espec\u00edficamente para WooCommerce, o para un sitio de WordPress m\u00e1s general. Sin embargo, necesitar\u00e1s tener en mente el prop\u00f3sito de tu tienda a la hora de personalizar tu tema child. Despu\u00e9s de todo, un sitio de e-commerce necesita una pol\u00edtica de dise\u00f1o diferente, como un blog. \u00a1Miremos esto en la pr\u00e1ctica!<\/span><\/p>\n\n\n\n<h2 id=\"h-como-crear-un-tema-child-de-woocommerce-en-5-pasos\" class=\"wp-block-heading\"><b>C\u00f3mo Crear Un Tema Child De WooCommerce (En 5 Pasos)<\/b><\/h2>\n\n\n\n<p><span style=\"font-weight: 400;\">Ahora vamos a mostrarte paso a paso c\u00f3mo construir un tema child de WooCommerce. En este ejemplo, elaboraremos un tema b\u00e1sico que use Storefront como su tema principal, aunque puedes usar cualquier tema como base.&nbsp;<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Te mostraremos c\u00f3mo funciona esta proceso empezando desde cero. Sin embargo, si quieres saltarte algunos de estos pasos e ir directo a personalizar tu sitio, puedes descargar e instalar un <\/span><a href=\"https:\/\/github.com\/stuartduff\/storefront-child-theme\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">tema child de muestra de Storefront<\/span><\/a><span style=\"font-weight: 400;\">.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">\u00a1Atenci\u00f3n! Te recomendamos mucho que <\/span><a href=\"https:\/\/www.dreamhost.com\/blog\/es\/tutorial-como-crear-copia-seguridad-wordpress\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">hagas una copia de seguridad de tu sitio<\/span><\/a><span style=\"font-weight: 400;\"> antes de que avances m\u00e1s all\u00e1. Esto ayudar\u00e1 a mantener tu tienda segura, si algo sale mal durante el resto del proceso de desarrollo.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Adem\u00e1s, es una buena idea emplear <\/span><a href=\"https:\/\/www.dreamhost.com\/blog\/es\/guia-sobre-sitios-web-staging\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">un ambiente de staging,<\/span><\/a><span style=\"font-weight: 400;\"> para crear y hacer cambios a tu tema child. \u00a1Una vez hayas tomado estas precauciones de seguridad, podr\u00e1s avanzar al primer paso!<\/span><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-paso-1-haz-una-carpeta-para-tu-tema-child-de-woocommerce\"><b>Paso 1. Haz Una Carpeta Para Tu Tema Child De WooCommerce<\/b><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">Lo primero que necesitar\u00e1s es crear una carpeta que contenga tu tema. Si est\u00e1s a\u00f1adiendo el tema child directamente a un sitio existente, lo mejor es que lo hagas <\/span><a href=\"https:\/\/help.dreamhost.com\/hc\/es\/articles\/115000675027-Generalidades-sobre-FTP-y-sus-credenciales\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">a trav\u00e9s de SFTP<\/span><\/a><span style=\"font-weight: 400;\">. Puedes hacerlo con una aplicaci\u00f3n gratuita como <\/span><a href=\"https:\/\/filezilla-project.org\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">FileZilla<\/span><\/a><span style=\"font-weight: 400;\">.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Una vez tienes el programa funcionando, accede a tu sitio con tus credenciales de FTP proporcionadas por tu compa\u00f1\u00eda de alojamiento. Entonces, necesitar\u00e1s navegar a la carpeta <\/span><i><span style=\"font-weight: 400;\">wp-content\/themes\/<\/span><\/i><span style=\"font-weight: 400;\">. Aqu\u00ed es donde est\u00e1n instalados los temas de tu sitio.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Todo lo que necesitas ahora, ser\u00e1 crear una nueva carpeta dentro de esta:<\/span><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"900\" height=\"404\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/carpeta-themes-WordPress-FTP.png\" alt=\"Carpeta Themes de una instalaci\u00f3n de WordPress a trav\u00e9s de FTP\" class=\"wp-image-37892 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/11\/carpeta-themes-WordPress-FTP.png.webp 900w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/carpeta-themes-WordPress-FTP-300x135.png 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/carpeta-themes-WordPress-FTP-768x345.png 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/11\/carpeta-themes-WordPress-FTP-600x269.png.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/11\/carpeta-themes-WordPress-FTP-750x337.png.webp 750w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/carpeta-themes-WordPress-FTP-100x45.png 100w\" data-sizes=\"(max-width: 900px) 100vw, 900px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 900px; --smush-placeholder-aspect-ratio: 900\/404;\" \/><\/figure><\/div>\n\n\n<p><span style=\"font-weight: 400;\">Cuando creas un tema child, es mejor darle un nombre que refleje el tema principal. Por ejemplo, si estamos creando un tema child para Storefront, podemos denominar a nuestra carpeta \u201cstorefront-child\u201d.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Lo primero que necesitar\u00e1s crear y acomodar en esta carpeta es un archivo de texto, muy simple, al cual llamar\u00e1s <\/span><a href=\"https:\/\/codex.wordpress.org\/Functions_File_Explained\" target=\"_blank\" rel=\"noopener\"><i><span style=\"font-weight: 400;\">functions.php<\/span><\/i><\/a><span style=\"font-weight: 400;\">. Este es un archivo principal muy importante, que ayudar\u00e1 a definir c\u00f3mo funcionar\u00e1 y lucir\u00e1 tu sitio. Sin embargo, muchos <\/span><a href=\"https:\/\/developer.wordpress.org\/themes\/advanced-topics\/child-themes\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">temas child pueden utilizar las funciones<\/span><\/a><span style=\"font-weight: 400;\"> contenidas en los archivos del tema principal y no necesitar unas propias.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Por esta raz\u00f3n, este archivo puede quedar en blanco por ahora. Solo crea el archivo de texto con el nombre <\/span><i><span style=\"font-weight: 400;\">functions.php<\/span><\/i><span style=\"font-weight: 400;\">, y gu\u00e1rdalo en la carpeta de tu tema child:<\/span><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"900\" height=\"458\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/carpeta-Storefront-WordPress-FTP.png\" alt=\"Carpeta del tema storefront en una instalaci\u00f3n de WordPress \" class=\"wp-image-37893 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/11\/carpeta-Storefront-WordPress-FTP.png.webp 900w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/carpeta-Storefront-WordPress-FTP-300x153.png 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/carpeta-Storefront-WordPress-FTP-768x391.png 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/11\/carpeta-Storefront-WordPress-FTP-600x305.png.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/11\/carpeta-Storefront-WordPress-FTP-750x382.png.webp 750w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/carpeta-Storefront-WordPress-FTP-100x51.png 100w\" data-sizes=\"(max-width: 900px) 100vw, 900px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 900px; --smush-placeholder-aspect-ratio: 900\/458;\" \/><\/figure><\/div>\n\n\n<p><span style=\"font-weight: 400;\">Tu tema est\u00e1 ahora listo para ser activado y utilizado. Primero, de todos modos, necesitar\u00e1s una hoja de estilo.<\/span><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-paso-2-crea-la-hoja-de-estilo-de-tu-tema-child\"><b>Paso 2: Crea La Hoja De Estilo De Tu Tema Child<\/b><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">El siguiente archivo que necesitar\u00e1s crear es el <\/span><a href=\"https:\/\/wordpress.org\/support\/article\/css\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">Cascading Style Sheet (CSS)<\/span><\/a><span style=\"font-weight: 400;\"> de tu tema. Este archivo definir\u00e1 los estilos y ser\u00e1 aplicado a las p\u00e1ginas y contenido de tu sitio. En otras palabras, te permitir\u00e1 especificar c\u00f3mo lucir\u00e1n ciertos elementos individuales en tu sitio web. Entonces, cuando la gente habla sobre actualizar estilos, est\u00e1n refiri\u00e9ndose realmente a actualizar el archivo CSS de un sitio.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Tu tema principal ya traer\u00e1 una hoja de estilo, pero el CSS de tu tema child puede ser utilizado para anular esos estilos. M\u00e1s tarde veremos c\u00f3mo funciona esto exactamente.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Por ahora, solo tienes que crear el archivo CSS. Para hacer esto, a\u00f1ade un archivo de texto a tu carpeta <\/span><i><span style=\"font-weight: 400;\">wp-content\/themes\/storefront-child<\/span><\/i><span style=\"font-weight: 400;\"> (o el nombre que t\u00fa hayas elegido para llamar a tu tema child). N\u00f3mbralo como <\/span><i><span style=\"font-weight: 400;\">style.css<\/span><\/i><span style=\"font-weight: 400;\">:<\/span><\/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\/archivo-css-stylesheet-WordPress-FTP.png\" alt=\"Archivo style sheet de CSS de un tema WordPress\" class=\"wp-image-37894 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/11\/archivo-css-stylesheet-WordPress-FTP.png.webp 864w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/archivo-css-stylesheet-WordPress-FTP-300x156.png 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/archivo-css-stylesheet-WordPress-FTP-768x400.png 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/11\/archivo-css-stylesheet-WordPress-FTP-600x313.png.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/11\/archivo-css-stylesheet-WordPress-FTP-750x391.png.webp 750w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/archivo-css-stylesheet-WordPress-FTP-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><span style=\"font-weight: 400;\">Necesitar\u00e1s, adem\u00e1s, a\u00f1adir alguna informaci\u00f3n b\u00e1sica. Copia y pega este fragmento de c\u00f3digo en tu nuevo archivo <\/span><i><span style=\"font-weight: 400;\">style.css<\/span><\/i><span style=\"font-weight: 400;\">:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><span style=\"font-weight: 400;\">\/*<\/span>\n<span style=\"font-weight: 400;\">Theme Name: Storefront Child<\/span>\n<span style=\"font-weight: 400;\">Theme URI: http:\/\/example.com\/storefront-child\/<\/span>\n<span style=\"font-weight: 400;\">Description: My first WooCommerce child theme<\/span>\n<span style=\"font-weight: 400;\">Author: Your Name<\/span>\n<span style=\"font-weight: 400;\">Author URI: http:\/\/example.com<\/span>\n<span style=\"font-weight: 400;\">Version: 1.0.0<\/span>\n<span style=\"font-weight: 400;\">License: GNU General Public License v2 or later<\/span>\n<span style=\"font-weight: 400;\">License URI: http:\/\/www.gnu.org\/licenses\/gpl-2.0.html<\/span>\n<span style=\"font-weight: 400;\">*\/<\/span><\/pre>\n\n\n\n<p><span style=\"font-weight: 400;\">Estos son los detalles sobre tu tema que ver\u00e1s cuando lo visualices en el directorio de tu tema o en tu panel de WordPress. Si\u00e9ntete libre de reemplazar los datos de los marcadores de posici\u00f3n, con informaci\u00f3n m\u00e1s espec\u00edfica para ti y tu tema.<\/span><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-paso-3-configura-el-tema-child-para-heredar-los-estilos-del-tema-principal\"><b>Paso 3: Configura El Tema Child Para Heredar Los Estilos Del Tema Principal<\/b><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">Tal y como ya mencionamos, querr\u00e1s que tu tema child use los estilos predeterminados de tu tema principal. Sin embargo, necesitar\u00e1s anular los estilos que quieras cambiar. Esto puede sonar complejo \u2014 y <\/span><a href=\"https:\/\/www.dreamhost.com\/blog\/es\/aprende-css\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">CSS realmente puede ponerse complicado<\/span><\/a><span style=\"font-weight: 400;\"> \u2014 pero en esencia, el tema child siempre usar\u00e1 el estilo del tema principal, a menos que espec\u00edficamente haya un reemplazo.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Por ejemplo, digamos que tu tema principal define el estilo para los elementos del encabezado H1 y establece que tendr\u00e1n letra roja de 20px. Si el archivo <\/span><i><span style=\"font-weight: 400;\">style.css<\/span><\/i><span style=\"font-weight: 400;\"> del tema child no contiene una entrada para los encabezados H1, entonces el estilo del principal ser\u00e1 aplicado a todo el contenido H1. Sin embargo, si vamos a a\u00f1adir un estilo H1 a la hoja de estilos del tema child que defina esos encabezados a letra azul de 18px, esto anular\u00e1 las indicaciones del tema principal.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">A\u00f1adir esta funcionalidad a tu tema child realmente es muy simple. Todo lo que necesitas es referenciar tu tema principal en la hoja de estilo de tu tema child.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Simplemente, a\u00f1ade el siguiente fragmento despu\u00e9s de la informaci\u00f3n que pegaste previamente en tu archivo <\/span><i><span style=\"font-weight: 400;\">style.css<\/span><\/i><span style=\"font-weight: 400;\">:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><span style=\"font-weight: 400;\">Template: storefront<\/span><\/pre>\n\n\n\n<p><span style=\"font-weight: 400;\">Este c\u00f3digo define el tema principal y asegura que tu tema child usar\u00e1 los estilos de Storefront donde quiera que no hayas especificado un reemplazo. Si est\u00e1s creando un tema child para un tema diferente, simplemente podr\u00e1s emplear el nombre de la carpeta en su lugar.<\/span><\/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-paso-4-activar-el-tema-child\"><b>Paso 4: Activar El Tema Child<\/b><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">A estas alturas, tu tema child est\u00e1 t\u00e9cnicamente listo. Est\u00e1 configurado para funcionar en tu sitio, as\u00ed que activ\u00e9moslo, para ver c\u00f3mo luce.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Ve a \u2018<\/span><b>Apariencia &gt; Temas<\/b><i><span style=\"font-weight: 400;\">\u2019<\/span><\/i><span style=\"font-weight: 400;\"> en tu panel de WordPress, y ver\u00e1s tu tema child ya instalado:<\/span><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"900\" height=\"306\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/Eligiendo-tema-Wordpress.jpg\" alt=\"Men\u00fa temas instalados en WordPress\" class=\"wp-image-37895 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/11\/Eligiendo-tema-Wordpress.jpg.webp 900w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/Eligiendo-tema-Wordpress-300x102.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/Eligiendo-tema-Wordpress-768x261.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/11\/Eligiendo-tema-Wordpress-600x204.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/11\/Eligiendo-tema-Wordpress-750x255.jpg.webp 750w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/Eligiendo-tema-Wordpress-100x34.jpg 100w\" data-sizes=\"(max-width: 900px) 100vw, 900px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 900px; --smush-placeholder-aspect-ratio: 900\/306;\" \/><\/figure><\/div>\n\n\n<p><span style=\"font-weight: 400;\">Selecciona \u2018<\/span><b>Activar\u2019<\/b> <span style=\"font-weight: 400;\">para hacer que sea el tema actual de tu sitio. Podr\u00e1s ahora previsualizarlo desde el frontend:<\/span><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"900\" height=\"473\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/tema-principal-storefront-woocommerce.jpg\" alt=\"Frontend de un tema storefront child instalado en WordPress\" class=\"wp-image-37896 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/11\/tema-principal-storefront-woocommerce.jpg.webp 900w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/tema-principal-storefront-woocommerce-300x158.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/tema-principal-storefront-woocommerce-768x404.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/11\/tema-principal-storefront-woocommerce-600x315.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/11\/tema-principal-storefront-woocommerce-750x394.jpg.webp 750w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/tema-principal-storefront-woocommerce-100x53.jpg 100w\" data-sizes=\"(max-width: 900px) 100vw, 900px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 900px; --smush-placeholder-aspect-ratio: 900\/473;\" \/><\/figure><\/div>\n\n\n<p><span style=\"font-weight: 400;\">Como puedes ver, luce exactamente igual que el tema original. Cuando el tema child pasa a estar activo, arrastra los estilos desde el tema principal. Por eso, y para personalizar su apariencia, tendr\u00e1s que ser creativo con la hoja de estilos de tu tema child.<\/span><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-paso-5-anade-estilos-a-tu-tema-child\"><b>Paso 5: A\u00f1ade Estilos A Tu tema Child<\/b><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">Finalmente, es hora de empezar a dar estilo a tu tema child. \u00bfC\u00f3mo? Realmente depende de ti, tu creatividad y c\u00f3mo quieres que se vea tu tienda. Sin embargo, miremos algunos ejemplos de lo que puedes hacer, para que tengas una gu\u00eda.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Para que puedas entender c\u00f3mo funciona esta edici\u00f3n de tu tema child, cambiaremos el look de los botones de nuestra tienda. En este momento, aparecen grises con texto negro, pero podemos actualizar este estilo para que resalten m\u00e1s:<\/span><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"900\" height=\"398\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/edicion-botones-gris-tema-storefront.jpg\" alt=\"Edici\u00f3n de botones de un tema child en WordPress\" class=\"wp-image-37897 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/11\/edicion-botones-gris-tema-storefront.jpg.webp 900w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/edicion-botones-gris-tema-storefront-300x133.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/edicion-botones-gris-tema-storefront-768x340.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/11\/edicion-botones-gris-tema-storefront-600x265.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/11\/edicion-botones-gris-tema-storefront-750x332.jpg.webp 750w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/edicion-botones-gris-tema-storefront-100x44.jpg 100w\" data-sizes=\"(max-width: 900px) 100vw, 900px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 900px; --smush-placeholder-aspect-ratio: 900\/398;\" \/><\/figure><\/div>\n\n\n<p><span style=\"font-weight: 400;\">Abre el archivo <\/span><i><span style=\"font-weight: 400;\">style.css<\/span><\/i><span style=\"font-weight: 400;\"> de tu tema child de nuevo y a\u00f1ade el siguiente c\u00f3digo despu\u00e9s del \u00faltimo <\/span><i><span style=\"font-weight: 400;\">*\/<\/span><\/i><span style=\"font-weight: 400;\"> en el encabezado del archivo:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><span style=\"font-weight: 400;\">.button,<\/span>\n<span style=\"font-weight: 400;\">button.button,<\/span>\n<span style=\"font-weight: 400;\">input.button,<\/span>\n<span style=\"font-weight: 400;\">#review_form #submit {<\/span>\n<span style=\"font-weight: 400;\">background: pink;<\/span>\n<span style=\"font-weight: 400;\">color: red;<\/span>\n<span style=\"font-weight: 400;\">}<\/span><\/pre>\n\n\n\n<p><span style=\"font-weight: 400;\">Si guardas tu archivo y lo ves en el frontend ahora, podr\u00e1s ver el cambio ya en acci\u00f3n. Los botones ahora tendr\u00e1n un tono rosa vibrante, con texto rojo:<\/span><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"900\" height=\"399\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/edicion-botones-rojo-tema-storefront.jpg\" alt=\"Edici\u00f3n de botones de un tema child en WordPress\" class=\"wp-image-37898 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/11\/edicion-botones-rojo-tema-storefront.jpg.webp 900w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/edicion-botones-rojo-tema-storefront-300x133.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/edicion-botones-rojo-tema-storefront-768x340.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/11\/edicion-botones-rojo-tema-storefront-600x266.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/11\/edicion-botones-rojo-tema-storefront-750x333.jpg.webp 750w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/edicion-botones-rojo-tema-storefront-100x44.jpg 100w\" data-sizes=\"(max-width: 900px) 100vw, 900px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 900px; --smush-placeholder-aspect-ratio: 900\/399;\" \/><\/figure><\/div>\n\n\n<p><span style=\"font-weight: 400;\">Adem\u00e1s, puedes hacer cambios a tus <\/span><a href=\"https:\/\/www.dreamhost.com\/blog\/es\/plantillas-y-partes-plantillas-wordpress\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">archivos de plantilla de tema<\/span><\/a><span style=\"font-weight: 400;\">. Solo necesitar\u00e1s copiar el archivo de plantilla que quieras modificar, como <\/span><i><span style=\"font-weight: 400;\">header.php<\/span><\/i><span style=\"font-weight: 400;\">, desde tus carpetas de tema principal y child.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Sin embargo, necesitar\u00e1s tambi\u00e9n hacer cambios para especificar cu\u00e1l funci\u00f3n usa WordPress para <\/span><a href=\"https:\/\/developer.wordpress.org\/themes\/advanced-topics\/child-themes\/#adding-template-files\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">referenciar los archivos de plantilla<\/span><\/a><span style=\"font-weight: 400;\">. Esto requiere emplear la funci\u00f3n <\/span><span style=\"font-weight: 400;\">get_stylesheet_directory();<\/span><span style=\"font-weight: 400;\"> en lugar de <\/span><span style=\"font-weight: 400;\">get_template_directory()<\/span><span style=\"font-weight: 400;\"> para referenciar tus plantillas.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Para aprender m\u00e1s sobre c\u00f3mo hacer esto, puedes leer al respecto en las <\/span><a href=\"https:\/\/docs.woocommerce.com\/document\/template-structure\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">plantillas de WooCommerce.<\/span><\/a><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">A estas alturas, debemos felicitarte, porque\u2026 \u00a1Has creado un tema child de WooCommerce! Por supuesto que hay mucho m\u00e1s que puedes hacer, pero ahora sabes c\u00f3mo empezar a con las configuraciones b\u00e1sicas. \u00a1Te recomendamos <\/span><a href=\"https:\/\/www.dreamhost.com\/blog\/es\/aprende-css\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">desempolvar tus habilidades de CSS<\/span><\/a><span style=\"font-weight: 400;\"> para sacar m\u00e1ximo provecho de tus estilos!<\/span><\/p>\n\n\n\n<h2 id=\"h-crear-un-tema-child-de-woocommerce\" class=\"wp-block-heading\"><b>Crear un Tema Child de WooCommerce<\/b><\/h2>\n\n\n\n<p><a href=\"https:\/\/es.wordpress.org\/plugins\/woocommerce\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">WooCommerce<\/span><\/a><span style=\"font-weight: 400;\"> hace m\u00e1s simple el crear una tienda virtual. Adem\u00e1s, podr\u00e1s cambiar su aspecto usando <\/span><a href=\"https:\/\/woocommerce.com\/es-es\/storefront\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">el tema Storefront<\/span><\/a><span style=\"font-weight: 400;\"> o uno de los m\u00faltiples <\/span><a href=\"https:\/\/themeforest.net\/category\/wordpress\/ecommerce\/woocommerce\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">temas personalizados<\/span><\/a><span style=\"font-weight: 400;\">.&nbsp;<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Sin embargo, no tienes que depender de la creatividad de otros. Crear tu tema child de WooCommerce no es tan dif\u00edcil como parecer\u00eda en un inicio, mientras que tendr\u00e1s total control sobre el aspecto y las funcionalidades de tu sitio, si te animas a hacerlo.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">\u00a1Qu\u00e9 seas feliz con tus ventas!<\/span><span style=\"font-weight: 400;\"><\/span><\/p>\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      Tu Tienda Merece Alojamiento WooCommerce\n    <\/h2>\n    <p\n      class=\"p--md\"\n    >\n      Vende cualquier cosa, en cualquier lugar, en cualquier momento en la plataforma m\u00e1s grande de e-Commerce del mundo.\n    <\/p>\n\n            <a\n            href=\"https:\/\/www.dreamhost.com\/es\/wordpress\/woocommerce-hosting\/\"\n                        class=\"btn btn--white-outline btn--sm btn--round\"\n                                    target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            >\n                            Adquiere Tu Plan                    <\/a>\n\n  <\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Digamos que tienes una tienda WooCommerce funcionando en l\u00ednea.&nbsp; Si est\u00e1s usando el tema oficial de Storefront, puede verse bastante profesional. Sin embargo, puede que a\u00fan quieras personalizar la apariencia de tu tienda WooCommerce para que se ajuste a lo que deseas. La mejor soluci\u00f3n es originar un tema child de WooCommerce. Esto se debe [&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":"Los temas child de WooCommerce te permiten personalizar tu tienda WordPress en l\u00ednea al crear una copia del tema principal. \u00a1Conoce m\u00e1s!","toc_headlines":"[[\"h-una-vista-rapida-a-los-temas-de-woocommerce\",\"Una Vista R\u00e1pida A Los Temas de WooCommerce\"],[\"h-cuando-deberias-pensar-en-crear-un-tema-child-de-woocommerce\",\"Cu\u00e1ndo Deber\u00edas Pensar En Crear Un Tema Child de WooCommerce\"],[\"h-como-crear-un-tema-child-de-woocommerce-en-5-pasos\",\"C\u00f3mo Crear Un Tema Child De WooCommerce (En 5 Pasos)\"],[\"h-crear-un-tema-child-de-woocommerce\",\"Crear un Tema Child de WooCommerce\"]]","hide_toc":false,"footnotes":""},"categories":[11668,11683],"tags":[],"class_list":["post-37888","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutoriales","category-wordpress-es"],"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>C\u00f3mo Crear Un Tema Hijo (Child) De WooCommerce - DreamHost<\/title>\n<meta name=\"description\" content=\"Los temas child de WooCommerce te permiten personalizar tu tienda WordPress en l\u00ednea al crear una copia del tema principal. \u00a1Conoce m\u00e1s!\" \/>\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\/es\/crear-un-tema-hijo-child-woocommerce\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"C\u00f3mo Crear Un Tema Hijo (Child) De WooCommerce\" \/>\n<meta property=\"og:description\" content=\"Los temas child de WooCommerce te permiten personalizar tu tienda WordPress en l\u00ednea al crear una copia del tema principal. \u00a1Conoce m\u00e1s!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www-dev.dreamhost.com\/blog\/es\/crear-un-tema-hijo-child-woocommerce\/\" \/>\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:25+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-01-16T21:04:11+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/WooCommerce-Child-Themes-ES.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":"C\u00f3mo Crear Un Tema Hijo (Child) De WooCommerce - DreamHost","description":"Los temas child de WooCommerce te permiten personalizar tu tienda WordPress en l\u00ednea al crear una copia del tema principal. \u00a1Conoce m\u00e1s!","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\/es\/crear-un-tema-hijo-child-woocommerce\/","og_locale":"en_US","og_type":"article","og_title":"C\u00f3mo Crear Un Tema Hijo (Child) De WooCommerce","og_description":"Los temas child de WooCommerce te permiten personalizar tu tienda WordPress en l\u00ednea al crear una copia del tema principal. \u00a1Conoce m\u00e1s!","og_url":"https:\/\/www-dev.dreamhost.com\/blog\/es\/crear-un-tema-hijo-child-woocommerce\/","og_site_name":"DreamHost Blog","article_publisher":"https:\/\/www.facebook.com\/DreamHost\/","article_published_time":"2022-11-03T14:00:25+00:00","article_modified_time":"2025-01-16T21:04:11+00:00","og_image":[{"width":1200,"height":628,"url":"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/WooCommerce-Child-Themes-ES.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\/es\/crear-un-tema-hijo-child-woocommerce\/#article","isPartOf":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/es\/crear-un-tema-hijo-child-woocommerce\/"},"author":{"name":"Jason Cosper","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/person\/2273b8bf7336df78f6d99a89c17253c4"},"headline":"C\u00f3mo Crear Un Tema Hijo (Child) De WooCommerce","datePublished":"2022-11-03T14:00:25+00:00","dateModified":"2025-01-16T21:04:11+00:00","mainEntityOfPage":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/es\/crear-un-tema-hijo-child-woocommerce\/"},"wordCount":2199,"publisher":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#organization"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/es\/crear-un-tema-hijo-child-woocommerce\/#primaryimage"},"thumbnailUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/WooCommerce-Child-Themes-Feature.jpg","articleSection":["Tutoriales","WordPress"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www-dev.dreamhost.com\/blog\/es\/crear-un-tema-hijo-child-woocommerce\/","url":"https:\/\/www-dev.dreamhost.com\/blog\/es\/crear-un-tema-hijo-child-woocommerce\/","name":"C\u00f3mo Crear Un Tema Hijo (Child) De WooCommerce - DreamHost","isPartOf":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/es\/crear-un-tema-hijo-child-woocommerce\/#primaryimage"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/es\/crear-un-tema-hijo-child-woocommerce\/#primaryimage"},"thumbnailUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/WooCommerce-Child-Themes-Feature.jpg","datePublished":"2022-11-03T14:00:25+00:00","dateModified":"2025-01-16T21:04:11+00:00","description":"Los temas child de WooCommerce te permiten personalizar tu tienda WordPress en l\u00ednea al crear una copia del tema principal. \u00a1Conoce m\u00e1s!","breadcrumb":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/es\/crear-un-tema-hijo-child-woocommerce\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www-dev.dreamhost.com\/blog\/es\/crear-un-tema-hijo-child-woocommerce\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/es\/crear-un-tema-hijo-child-woocommerce\/#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\/es\/crear-un-tema-hijo-child-woocommerce\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/dhblog.dream.press\/blog\/"},{"@type":"ListItem","position":2,"name":"C\u00f3mo Crear Un Tema Hijo (Child) De WooCommerce"}]},{"@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":"es","translations":{"es":37888,"en":37872,"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\/37888","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=37888"}],"version-history":[{"count":7,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/37888\/revisions"}],"predecessor-version":[{"id":63147,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/37888\/revisions\/63147"}],"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=37888"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/categories?post=37888"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/tags?post=37888"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}