¿Se pueden personalizar las páginas de detalles de productos de WooCommerce con código? Guía de inicio completa

WooCommerce Es el mejor plugin de comercio electrónico para WordPress para crear páginas de productos, carritos de la compra y sistemas de pago fácilmente. ¿Pero la página de producto por defecto puede no satisfacer tus necesidades? No te preocupes, de hecho, con un simple código puedes personalizar la página de detalles del producto para hacerla más acorde con el estilo de tu tienda. A continuación te explicamos cómo modificarla con tus propias manos.

I. Introducción a la estructura de las páginas de detalles de productos de WooCommerce

Por defecto, WooCommerce muestra la página del producto utilizando la plantilla incorporada, que se abre con la ruta:

/wp-content/plugins/woocommerce/templates/single-product/

Las estructuras más comunes son:

• Título del producto (woocommerce_template_single_title)
• Precio del producto (woocommerce_template_single_price)
• Imágenes de productos (woocommerce_show_product_images)
• Una breve descripción del producto (woocommerce_template_single_excerpt)
• Botón Añadir a la cesta (woocommerce_template_single_add_to_cart)
• Etiquetado y clasificación de productos (woocommerce_template_single_meta)
• Detalles del producto (descripción, reseñas Tab) (woocommerce_output_product_data_tabs)

Estas piezas están disponibles a través de la WordPress Se carga y controla el sistema de ganchos (acciones y filtros).

En segundo lugar, ¿cómo personalizar la página de detalles del producto con código?

WooCommerce es altamente personalizable, con la capacidad de añadir, eliminar y reordenar elementos de las páginas de productos con sólo unas pocas líneas de código.

Abre la ruta como: WordPress- Apariencia - Editor de archivos de tema

1. Eliminar módulos por defecto (por ejemplo, eliminar el etiquetado del producto)

remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_meta', 40 );

Añada este código al tema actual funciones.php El archivo está bien.

2. AñadirpersonalizaciónContenido (por ejemplo, insertar una frase debajo del precio)

add_action( 'woocommerce_single_product_summary', 'custom_text_after_price', 11 );
function custom_text_after_price() {
    echo '<p class="custom-message">🎁 Este producto admite 7 días sin motivo de devolución y cambio</p>';
}

El número 11 aquí es la prioridad, asegurándose de que se carga después del precio (la prioridad por defecto es 10).

3. Cambie la ubicación del módulo (por ejemplo, mueva la descripción breve debajo del botón "Añadir al carrito").

remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 20 );
add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 35 );

Basta con ajustar elganchosEl cambio flexible de posición es posible gracias a la orden de carga del

En tercer lugar, sustituya el archivo de plantilla de la página de detalles del producto

Si se requiere un cambio estructural más radical, puede anularse mediante WooCommerce Plantilla por defecto:

• Crear un directorio en el tema o subtema actual /su-tema/woocommerce/single-product/
• Copie los archivos necesarios del directorio de plantillas del plugin (p. ej. precio.php, título.php etc.) a la ruta anterior
• Modificando estas plantillas, se puede personalizar la estructura sin que ello afecte a las posteriores actualizaciones de WooCommerce.

IV. Recomendaciones prácticas de personalización

• Añadir el número de producto o el estado de las existencias bajo la imagen del producto
• Mostrar mensajes diferentes en función de si el usuario está conectado o no
• coubicación ACF El plugin muestra campos personalizados para marca, origen, etc.
• Habilitar una lógica de presentación diferente sólo para determinados tipos de productos

V. Habilidades de depuración del desarrollador

Habilite la función de depuración de plantillas de WooCommerce para ver rápidamente las fuentes de las plantillas y las ubicaciones de los ganchos:

add_filter( 'woocommerce_developer_mode', '__return_true' );

Utilícelo con el complemento Query Monitor para ver los ganchos cargados, las rutas de las plantillas y las prioridades de ejecución.

VI. Resumen

WooCommerce Las páginas de detalles del producto se pueden personalizar completamente de forma flexible mediante código. Sólo tiene que dominar el mecanismo de gancho básico y el método de anulación de plantilla, puede ajustar libremente el contenido de la pantalla y el orden de acuerdo con el negocio real, por lo que la página del producto es más profesional, más características de la marca.

Contacte con nosotros
¿No puede leer el tutorial? Póngase en contacto con nosotros para obtener una respuesta gratuita. Ayuda gratuita para sitios personales y de pequeñas empresas	Servicio de atención al cliente WeChat
① Tel: 020-2206-9892
② QQ咨询：1025174874
(iii) Correo electrónico: [email protected]
④ Horario de trabajo: de lunes a viernes, de 9:30 a 18:30, días festivos libres