Los desarrolladores de WooCommerce con dominio de PHP de WordPress, hooks, filtros y sustituciones de plantillas necesitan aprender un nuevo modelo mental para Shopify. Liquid es un lenguaje de plantillas más sencillo que PHP, pero los conceptos arquitectónicos difieren significativamente. Esta guía mapea los patrones PHP de WooCommerce a sus equivalentes en Shopify Liquid para los desarrolladores que realizan migraciones.

Comparación de jerarquías de plantillas

Estructura de plantillas de WooCommerce

woocommerce/
├── templates/
│   ├── single-product.php        ← página de producto
│   ├── archive-product.php       ← página de colección/tienda
│   ├── cart/cart.php             ← página del carrito
│   ├── checkout/form-checkout.php
│   └── content-product.php      ← tarjeta de producto en bucles

Las plantillas de WooCommerce se sustituyen copiándolas a tutema/woocommerce/. La jerarquía de plantillas de WordPress determina qué plantilla se carga.

Estructura de plantillas de Shopify

templates/
├── product.liquid (o product.json)    ← página de producto
├── collection.liquid                   ← página de colección
├── cart.liquid                         ← página del carrito
├── index.liquid                        ← página de inicio
└── page.liquid                         ← páginas estáticas

sections/
├── product-form.liquid                 ← sección del formulario de producto
├── collection-product-grid.liquid      ← sección de cuadrícula de productos
└── custom-section.liquid               ← tus secciones personalizadas

snippets/
├── product-card.liquid                 ← fragmento de tarjeta de producto
└── price.liquid                        ← fragmento de renderizado de precio

Shopify Online Store 2.0 usa plantillas JSON que definen qué secciones se cargan en una página. Esto permite la personalización desde el editor de temas.

Comparación de sintaxis PHP vs Liquid

Variables

// WooCommerce PHP
$product->get_title();
$product->get_price();
$product->get_sku();

// Shopify Liquid
{{ product.title }}
{{ product.price | money }}
{{ product.selected_or_first_available_variant.sku }}

Bucles

// WooCommerce PHP
foreach ($products as $product) {
  wc_get_template_part('content', 'product');
}

// Shopify Liquid
{% for product in collection.products %}
  {{ product.title }}
{% endfor %}

Condicionales

// WooCommerce PHP
if ($product->is_on_sale()) {
  echo 'En oferta!';
}

// Shopify Liquid
{% if product.compare_at_price > product.price %}
  En oferta!
{% endif %}

Filtros (Liquid) vs Funciones (PHP)

// WooCommerce PHP
wc_price($product->get_price());
strtoupper($text);
date('Y-m-d', $timestamp);

// Shopify Liquid
{{ product.price | money }}
{{ text | upcase }}
{{ article.created_at | date: "%Y-%m-%d" }}

Hooks de WordPress frente a secciones de Shopify

Hooks de WooCommerce

El sistema de hooks de WooCommerce (acciones y filtros) permite inyectar contenido en las plantillas:

// WooCommerce: añadir contenido antes del resumen del producto
add_action('woocommerce_before_single_product_summary', 'my_function');
function my_function() {
  echo '<div class="custom">Contenido personalizado</div>';
}

// WooCommerce: modificar el precio del producto
add_filter('woocommerce_get_price_html', 'my_price_filter', 10, 2);

Equivalente en Shopify: secciones y fragmentos

En Shopify no existe un sistema de hooks. El contenido se inyecta editando directamente las plantillas y secciones:

// Shopify product.json: añadir una sección personalizada a la plantilla de producto
{
  "sections": {
    "product-info": { "type": "product-form" },
    "custom-badge": { "type": "custom-badge-section" }  ← añade sección personalizada aquí
  },
  "order": ["product-info", "custom-badge"]
}

O: edita directamente el archivo Liquid de la sección para añadir contenido en posiciones específicas.

Campos personalizados: ACF vs metafields de Shopify

ACF de WooCommerce en PHP

// Leer un campo ACF en una plantilla de WooCommerce
$custom_value = get_field('material', get_the_ID());
echo esc_html($custom_value);

// O con post meta
$value = get_post_meta(get_the_ID(), '_custom_field_key', true);

Metafields de Shopify en Liquid

// Leer un metafield en Shopify Liquid
{{ product.metafields.product_info.material }}

// Con valor de reserva
{{ product.metafields.product_info.material | default: 'No especificado' }}

// Acceder a un metafield de lista
{% for item in product.metafields.product_info.materials.value %}
  {{ item }}
{% endfor %}

Bucles de productos: WooCommerce vs Shopify

Bucle de consulta de productos de WooCommerce

// WooCommerce: obtener productos y recorrerlos en bucle
$args = array(
  'post_type' => 'product',
  'posts_per_page' => 12,
  'tax_query' => array(
    array('taxonomy' => 'product_cat', 'field' => 'slug', 'terms' => 'sale')
  )
);
$products = new WP_Query($args);
while ($products->have_posts()) {
  $products->the_post();
  wc_get_template_part('content', 'product');
}

Bucle de productos en colección de Shopify

// Shopify Liquid: recorrer en bucle los productos de una colección
{% for product in collection.products %}
  {{ product.title }}
  {{ product.price | money }}
  {% if product.available %}
    <a href="{{ product.url }}">Añadir al carrito</a>
  {% endif %}
{% endfor %}

// Con paginación
{% paginate collection.products by 24 %}
  {% for product in collection.products %}
    ...
  {% endfor %}
  {{ paginate | default_pagination }}
{% endpaginate %}

Desarrollo de secciones personalizadas (equivalente a las áreas de widgets de WooCommerce)

Creación de una sección personalizada de Shopify (equivalente a un área de widgets de WooCommerce o un hook personalizado):

// sections/custom-badge.liquid
{% schema %}
{
  "name": "Insignia personalizada",
  "settings": [
    {
      "type": "text",
      "id": "badge_text",
      "label": "Texto de la insignia",
      "default": "¡Nuevo!"
    },
    {
      "type": "color",
      "id": "badge_color",
      "label": "Color de la insignia",
      "default": "#3a8c9c"
    }
  ],
  "presets": [
    {
      "name": "Insignia personalizada"
    }
  ]
}
{% endschema %}

<div class="custom-badge" style="background: {{ section.settings.badge_color }}">
  {{ section.settings.badge_text }}
</div>

Plugins de filtros de WooCommerce vs búsqueda/filtrado de Shopify

Filtro de navegación en capas de WooCommerce (PHP)

La navegación en capas de WooCommerce usa áreas de widgets y consultas de taxonomía personalizadas. WOOF y FacetWP proporcionan filtrado avanzado con consultas PHP personalizadas.

Filtrado nativo de Shopify

La app Search & Discovery de Shopify añade filtrado por facetas usando los filtros de colección configurados en el administrador. No se requiere PHP personalizado — los filtros se aplican mediante parámetros de URL y Liquid.

// Liquid: renderizar filtros activos
{% for filter in collection.filters %}
  {% for filter_value in filter.values %}
    {% if filter_value.active %}
      {{ filter_value.label }} ×
    {% endif %}
  {% endfor %}
{% endfor %}

Shopify CLI para el desarrollo de temas

La Shopify CLI reemplaza a WP-CLI y al desarrollo local de WordPress:

// WooCommerce: desarrollo local
# wp server, LocalWP, WAMP, Docker

// Shopify: desarrollo local de temas
npm install -g @shopify/cli @shopify/theme
shopify theme dev --store tu-tienda.myshopify.com
# Recarga en directo con vigilancia de archivos, directo a la tienda de desarrollo

shopify theme dev: desarrollo en directo con recarga automática
shopify theme push: envía los archivos del tema a la tienda
shopify theme pull: descarga los archivos del tema desde la tienda
Flujo de trabajo con Git: confirma los archivos del tema, usa shopify theme push para la implementación

Conceptos clave de Liquid para desarrolladores de WooCommerce

Sin consultas a la base de datos: Liquid no tiene acceso directo a la base de datos. Todos los datos provienen de los objetos predefinidos de Shopify (product, collection, customer, cart).
Sin funciones PHP personalizadas: No se puede añadir lógica de negocio PHP personalizada. Mueve la lógica compleja a Shopify Flow o a una app de Shopify (funciones serverless).
Esquema de sección: Cada sección tiene un bloque {% schema %} que define sus ajustes — así es como funciona la personalización del editor de temas.
Los tipos de metafield importan: Los metafields de Shopify son de tipo estricto. El acceso a un metafield de lista requiere .value en Liquid (p. ej., product.metafields.ns.key.value para tipos de lista).
Sin equivalente a WP_Query: No se pueden consultar productos arbitrarios en Liquid. Usa colecciones, secciones de producto destacado o la Storefront API (JavaScript) para consultas de productos dinámicas.
AJAX frente a Section Rendering API: La Section Rendering API de Shopify reemplaza al AJAX de WordPress para actualizaciones dinámicas de secciones (cajón del carrito, selector de productos, etc.).

Lista de verificación de migración para desarrolladores

Audita todas las sustituciones de plantillas de WooCommerce: enumera cada archivo de plantilla que se está sustituyendo y qué personalización realiza
Mapea cada sustitución a su equivalente en Shopify: edición de sección, fragmento o renderizado de metafield
Enumera todas las acciones/filtros de WooCommerce: ¿qué hooks inyectan contenido? Reimpleméntalos en secciones Liquid.
Exporta todos los campos ACF: mapéalos a definiciones de metafield de Shopify
Configura Shopify CLI para el desarrollo local de temas
Aprende los conceptos básicos de Liquid: filtros, bucles, condicionales, sintaxis del esquema de sección
Crea secciones personalizadas para cualquier contenido inyectado que estuviera basado en hooks PHP
Prueba la Section Rendering API para cualquier interfaz basada en AJAX (cajón del carrito, cambio de variante, vista rápida de producto)
Usa Shopify Flow para cualquier lógica de negocio que antes estuviera en PHP personalizado de WooCommerce (etiquetado automático, correo automático, actualizaciones de estado)

Liquid es más sencillo que PHP para la mayoría de las tareas — está intencionalmente limitado (sin acceso a la base de datos, sin ejecución PHP arbitraria) lo que significa menos riesgo de errores de desarrollador. La transición requiere un cambio de mentalidad: deja de pensar "¿cómo escribo PHP para hacer esto?" y empieza a pensar "¿cómo expone Shopify ya estos datos y cómo los renderizo?". La mayoría de las personalizaciones de WooCommerce se pueden replicar con los datos que proporciona Shopify — los casos que no se pueden son casos extremos que requieren una app de Shopify (lógica del lado del servidor) en lugar de código de plantilla.

Plantillas PHP de WooCommerce frente a Liquid de Shopify: guía de migración para desarrolladores (2026)