Cómo crear un tipo de producto WooCommerce personalizado mediante programación

Cuando está construyendo una tienda WooCommerce compleja, es posible que deba crear sus propias soluciones para problemas particulares. Uno de estos problemas es la falta de tipos de productos específicos de WooCommerce. Es por eso que en QuadLayers le hemos traído nuestra guía sobre cómo crear un tipo de producto de WooCommerce personalizado para su sitio web.

Veremos cómo puede definir sus tipos de productos, habilitar opciones y precios específicos para ellos, y mucho más. Pero primero, veamos los tipos de productos de WooCommerce y lo que pueden hacer los tipos de productos personalizados.

¿Por qué agregar un tipo de producto personalizado en WooCommerce?

Por defecto, WooCommerce tiene cuatro tipos de productos únicos. Estos son:

• producto sencillo
• producto variable
• Externo/Afiliado
• Producto descargable

Por supuesto, con los complementos externos de WooCommerce, puede agregar más tipos de productos, como productos de suscripción, productos que se pueden reservar, membresías y más.

Pero, ¿qué pasaría si quisiera crear un tipo de producto diferente a estos tipos específicos? Si tiene requisitos particulares que los tipos de productos predeterminados de WooCommerce no pueden cumplir, o si desea crear un tipo de producto personalizado, como membresía o productos de subasta sin usar un complemento de terceros, entonces puede crear un tipo de producto personalizado usando un poco de codificación.

Usar un tipo de producto personalizado significa agregar configuraciones diferentes y únicas al tipo de producto. Por ejemplo, si desea un tipo de producto variable específico y le agrega diferentes configuraciones de visibilidad o precios, puede hacerlo utilizando un tipo de producto personalizado. Además, también puede definir un tipo de producto específico para un solo tipo de producto que es único y solo cambiar la configuración del tipo de producto si lo desea.

Independientemente de sus necesidades, tener su tipo de producto personalizado le brinda más flexibilidad al personalizar y definir los productos que vende en su sitio web.

¿Cómo crear un tipo de producto WooCommerce personalizado?

El proceso de creación de un tipo de producto de WooCommerce es bastante simple pero requiere cierto nivel de codificación. Recomendamos a nuestros clientes que aprendan un poco más sobre cómo crear complementos personalizados de WordPress y agregarles códigos si desea continuar con este artículo.

Una vez que comprenda los conceptos básicos para crear sus complementos de WordPress en el directorio de su sitio web, continúe y abra su directorio de instalación de WP , abra wp-content/plugins y cree la carpeta ' QuadLayers_custom-product-type '. Para nuestra demostración, usaremos nuestro directorio localhost.

Después de eso, cree un archivo llamado ' Quadlayers_custom-product-type.php '. Este es su archivo principal que funciona como puerta de entrada para el resto de las funciones de su complemento.

Abra este archivo y pegue las siguientes líneas de código en el archivo:

 <?php

/**
* Nombre del complemento: Tipo de producto personalizado Quadlayers
* Descripción: código para la guía de Quadlayers sobre cómo crear un tipo de producto WooCommerce personalizado
*/

if ( ! definido( 'ABSPATH' ) ) {
devolver;
} 

Este conjunto de código define su complemento al agregar un nombre y una descripción del complemento. Por ahora, esto es suficiente, ya que necesitamos agregar más códigos a este archivo para que funcione. Ahora, debe activar su complemento recién creado. Mantendremos el complemento activado para el tutorial y agregaremos más códigos a medida que avanzamos.

Así que adelante, abra su Panel de administración de WP y haga clic en Complementos . Aquí, debería ver un nuevo complemento llamado Quadlayers Custom Product Type. Continúe, actívelo y avance al siguiente paso del tutorial.

Registrar tipo de producto WooCommerce personalizado

A continuación, crearemos una función para definir nuestro tipo de producto personalizado y registrarlo como un tipo de producto de WooCommerce. Para esto, agregue este código al archivo principal de su complemento:

 add_action( 'init', 'register_demo_product_type' );
función registro_demo_tipo_producto() {
class WC_Product_Demo extiende WC_Product {

función pública __construcción ($producto) {
$this->product_type = 'demo';
padre::__construcción ($producto);
}
}
}

Esto registrará un tipo de producto personalizado llamado demo. Si desea cambiar el nombre del tipo de producto, simplemente cambie el texto en $this->product_type = 'demo';

Agregue la opción de producto WooCommerce personalizado.

Después de esto, debemos agregar el tipo de producto personalizado a la lista desplegable Tipo de producto. Esto hace que su tipo de producto sea seleccionable cuando crea o edita un producto en su panel de administración de WP. Agregue este código al archivo principal de su complemento y debería ver una nueva opción en su lista de Tipo de producto.

 add_filter( 'product_type_selector', 'add_demo_product_type' );
función add_demo_product_type ($ tipos) {
$types[ 'demo' ] = __( 'Demo product', 'dm_product' );
devolver $tipos; 
}

Este código agregará su tipo de producto personalizado a la lista desplegable de datos del producto usando la línea $types['demo'] = __('Custom Product Type') . Puede cambiar el texto de Tipo de producto personalizado a cualquier cosa, como Producto de demostración, Pedido personalizado, Tarjeta de regalo, etc.

Ahora, abra su panel de administración de WP y cree un nuevo producto. En el menú desplegable Tipo de producto , debería ver una nueva opción denominada ' Producto de demostración '.

Agregar una pestaña de tipo de producto personalizado

La siguiente función creará una nueva pestaña de configuración para su tipo de producto personalizado. De esta forma, puede agregar detalles específicos a su tipo de producto que no se comparten con otros tipos de productos.

Pegue esta función para crear una pestaña Detalles personalizados del producto:

 add_filter('woocommerce_product_data_tabs', 'demo_product_tab');
function demo_product_tab ($ pestañas) {

$tabs['demostración'] = array(
'etiqueta' => __( 'Producto de demostración', 'dm_producto' ),
'objetivo' => 'demo_product_options',
'clase' => 'mostrar_si_producto_demo',
);
devolver $pestañas;
}
}

Recuerde usar su ID de tipo de producto en lugar de 'demo' en $tabs['demo'] = array si ha definido su propio tipo de producto arriba.

Los tres parámetros en la matriz que hemos usado son:

etiqueta: Esto define el nombre de la pestaña de su producto personalizado.
objetivo: Esto establece un identificador que usaremos para agregar configuraciones a la pestaña.
clase: esto le permite verificar cuándo mostrar la pestaña de producto personalizado.

Aquí, en el parámetro de clase, hemos usado show_if_Demo_product, lo que significa que esta pestaña solo se mostrará cuando se seleccione su tipo de producto personalizado.

Agregar campos de pestaña de tipo de producto personalizado

A continuación, agreguemos algunas configuraciones y campos a nuestra pestaña para que pueda establecer precios y varias opciones para su tipo de producto personalizado. Para esto, agregue este código al archivo principal de su complemento:

 add_action('woocommerce_product_data_panels', 'QL_custom_product_options_product_tab_content');

función QL_custom_product_options_product_tab_content() {
// No olvide cambiar la identificación en el div con su objetivo de la pestaña de su producto
?><div class='panel woocommerce_options_panel'><?php
?><div class='opciones_grupo'><?php

woocommerce_wp_checkbox(matriz(
'id' => '_habilitar_producto_personalizado',
'etiqueta' => __( 'Habilitar tipo de producto personalizado'),
) );

woocommerce_wp_text_input(
formación(
'id' => 'demo_product_info',
'etiqueta' => __( 'Detalles del producto personalizado', 'dm_producto' ),
'marcador de posición' => '',
'desc_tip' => 'verdadero',
'description' => __( 'Ingrese los detalles del producto de demostración.', 'dm_product' ),
'tipo' => 'texto'
)
);


?></div>
</div><?php
}

Esto agregará una opción de casilla de verificación para habilitar el tipo de producto personalizado y un campo de texto personalizado para el producto. Por supuesto, puede agregar más configuraciones usando otras funciones de WooCommerce, como woocommerce_wp_select() para una lista desplegable, woocommerce_wp_textarea_input() para un área de texto y mucho más.

Pero para nuestra demostración, solo mostraremos información de texto simple sobre el producto personalizado que los administradores pueden personalizar desde el backend.

Puede obtener más información sobre estas funciones y cómo usarlas aquí.

Guardar campos personalizados de la pestaña Tipo de producto de WooCommerce

Ahora que hemos creado nuestra configuración de tipo de producto, debemos guardarla en nuestra base de datos. Esto se hace usando el gancho woocommerce_process_product_meta. Para ello, utilizaremos estas líneas de código:

 add_action('woocommerce_process_product_meta', 'save_demo_product_settings');

función save_demo_product_settings ($post_id){

$demo_product_info = $_POST['demo_product_info'];

if( !empty( $demo_product_info ) ) {
update_post_meta ($ post_id, 'demo_product_info', esc_attr ($ demo_product_info));
}
}

Una vez que agregue este código al archivo principal de su complemento, podrá guardar la configuración personalizada del tipo de producto cuando actualice o publique un producto.

Sin embargo, estos códigos son solo para el backend y ahora se mostrarán en la parte frontal de su producto hasta que definamos una plantilla para que la use WooCommerce. Para ello, usaremos el siguiente paso de nuestro tutorial para mostrar el contenido de nuestro tipo de producto personalizado.

Agregar contenido para el tipo de producto personalizado

Acaba de crear el tipo de producto personalizado para su sitio web, pero también debe especificar en WooCommerce qué tipo de contenido desea que tenga el tipo de producto. Para esto, usaremos el gancho woocommerce_single_product_summary para agregar la información del producto que agregamos a la pestaña Detalles del producto personalizado.

 add_action('woocommerce_single_product_summary', 'demo_product_front');

función demo_product_front () {
$producto global;
if ( 'demo' == $producto->get_type() ) { 
echo( get_post_meta( $producto->get_id(), 'demo_product_info' )[0] );
}
}

Asegúrese de que su ID de tipo de producto coincida con el código if ('demo' == $product->get_type() , como mencionamos anteriormente. Una vez que guarde este código, verá los detalles de su producto personalizado en el frente.

Fragmento de código completo

Para su comodidad, hemos combinado los diferentes códigos en un solo conjunto, por lo que simplemente puede pegarlo en el archivo principal de su complemento y editarlo según sea necesario.

 <?php
/**
* Nombre del complemento: tipo de producto personalizado QuadLayers
* Descripción: complemento para agregar un tipo de producto personalizado a WooCommerce
* Autor: QuadLayers
* Autor URI: https://www.quadlayers.com
* Versión: 1.0
*/


definido ('ABSPATH') o salir;

add_action( 'init', 'register_demo_product_type' );
función registro_demo_tipo_producto() {
class WC_Product_Demo extiende WC_Product {

función pública __construcción ($producto) {
$this->product_type = 'demo';
padre::__construcción ($producto);
}
}
}


add_filter( 'product_type_selector', 'add_demo_product_type' );
función add_demo_product_type ($ tipos) {
$types[ 'demo' ] = __( 'Demo product', 'dm_product' );
devolver $tipos; 
}


add_filter('woocommerce_product_data_tabs', 'demo_product_tab');
function demo_product_tab ($ pestañas) {

$tabs['demostración'] = array(
'etiqueta' => __( 'Producto de demostración', 'dm_producto' ),
'objetivo' => 'demo_product_options',
'clase' => 'mostrar_si_producto_demo',
);
devolver $pestañas;
}


add_action('woocommerce_product_data_panels', 'demo_product_tab_product_tab_content');
function demo_product_tab_product_tab_content() {
?><div class='panel woocommerce_options_panel'><?php
?><div class='opciones_grupo'><?php


woocommerce_wp_checkbox(matriz(
'id' => '_habilitar_producto_personalizado',
'etiqueta' => __( 'Habilitar tipo de producto personalizado'),
) );


woocommerce_wp_text_input(
formación(
'id' => 'demo_product_info',
'etiqueta' => __( 'Detalles del producto de demostración', 'dm_producto' ),
'placeholder' => 'Inserte el texto que se mostrará en la parte delantera aquí',
'desc_tip' => 'verdadero',
'description' => __( 'Ingrese la información del producto de demostración', 'dm_product' ),
'tipo' => 'texto'
)
);
?></div>
</div><?php
}

add_action('woocommerce_process_product_meta', 'save_demo_product_settings');

función save_demo_product_settings ($post_id){

$enable_custom_product = isset( $_POST['_enable_custom_product'] ) ? 'sí No';
update_post_meta ($ post_id, '_enable_custom_product', $ enable_custom_product);
$demo_product_info = $_POST['demo_product_info'];

if( !empty( $demo_product_info ) ) {
update_post_meta ($ post_id, 'demo_product_info', esc_attr ($ demo_product_info));
}
}


add_action('woocommerce_single_product_summary', 'demo_product_front');

función demo_product_front () {
$producto global;
if ( 'demo' == $producto->get_type() ) { 
echo( get_post_meta( $producto->get_id(), 'demo_product_info' )[0] );
}
}

Por supuesto, todos los pasos que mostramos en este tutorial son bastante simples y puede y debe intentar agregar más campos, configuraciones y contenido a su tipo de producto personalizado. Además, como puede ver, este tutorial requiere un poco de programación. Entonces, si eres nuevo en WordPress o en la codificación, siempre puedes solicitar nuestra ayuda en la sección de comentarios. Además, también puede hacer las cosas de manera bastante diferente y usar el archivo functions.php de su tema para agregar todos estos códigos a su sitio web.

Esto omitiría el paso de crear un complemento de WordPress, pero tenga en cuenta que sus cambios desaparecerán si cambia o actualiza su tema (a menos que use un tema secundario). Recomendamos enfáticamente usar un complemento para este método, pero si lo prefiere para usar el archivo functions.php, puede hacerlo.

Recuerde siempre realizar una copia de seguridad completa de su sitio de WordPress antes de realizar cambios en el archivo functions.php. De esa manera, en caso de que algo salga mal, siempre puede volver a la versión de trabajo.

Simplemente haga clic en Apariencia > Editor de archivos de tema y haga clic en Funciones de tema o functions.php en la barra lateral derecha de Archivos de tema.

Luego, puede simplemente pegar los códigos anteriores en el editor y hacer clic en Actualizar archivo para finalizar.

Conclusión

Y eso finaliza todos los pasos necesarios para crear un tipo de producto WooCommerce personalizado mediante programación . Resumamos rápidamente todos los pasos necesarios para crear su tipo de producto personalizado:

• Cree y active el complemento para su tipo de producto WooCommerce personalizado.
• Registre su nuevo tipo de producto.
• Agregue una pestaña para su tipo de producto personalizado para la página de productos individuales.
• Agregue campos y configuraciones a la pestaña de su producto.
• Guarde los campos y la configuración en la pestaña de su producto.
• Muestre el contenido de la pestaña de su producto en la parte delantera.

Por último, para su comodidad, combinamos todos los diferentes fragmentos de código para proporcionarle el código completo. Por lo tanto, puede simplemente copiar el código completo de su archivo principal y realizar los cambios necesarios.

Esperamos que encuentre útil este artículo. Si desea obtener más información sobre la configuración de varias configuraciones y opciones de productos de WooCommerce, ¿por qué no consulta algunos de nuestros otros artículos?

• Cómo configurar descuentos por volumen de WooCommerce
• Cómo crear un usuario de WordPress programáticamente
• Crear un campo personalizado de WordPress programáticamente