a person using her laptop while holding a credit card

Cómo Crear un Tipo de Producto Personalizado en WooCommerce

Descubre cómo desarrollar un tipo de producto personalizado en WooCommerce con este tutorial detallado. Implementa funciones avanzadas para tus tiendas en línea.
a person using her laptop while holding a credit card
Photo by Pavel Danilyuk on Pexels.com

Con el crecimiento constante de las tiendas en línea basadas en WooCommerce, la necesidad de tipos de productos personalizados ha aumentado. En este artículo, te mostraré cómo desarrollar tu propio tipo de producto personalizado en WooCommerce para que puedas ofrecer funcionalidades adicionales y únicas a tus clientes.

¿Por qué necesitas un tipo de producto personalizado?

Los tipos de productos personalizados permiten a las tiendas en línea ofrecer soluciones más adaptadas a sus productos y servicios específicos. Por ejemplo, podrías querer crear un tipo de producto “Suscripción” que se maneje de manera diferente a los productos normales.

image 91

Pasos para Crear un Tipo de Producto Personalizado en WooCommerce:

  1. Registrar el Tipo de Producto: Explica cómo utilizar el add_action('init', 'register_my_subscription_product_type'); para registrar el nuevo tipo.
  2. Agregar el Tipo de Producto al Selector: Muestra cómo se puede agregar el tipo de producto al menú desplegable de tipos de producto utilizando el filtro product_type_selector.
  3. Personalizar la Visibilidad de las Pestañas en la Caja de Datos del Producto: Explica cómo se puede mostrar u ocultar pestañas específicas según el tipo de producto seleccionado.
  4. Añadir Datos Personalizados al Producto: Describe cómo se pueden agregar campos personalizados al producto, como una casilla de verificación para habilitar la suscripción o un campo de texto para agregar detalles de la suscripción.
  5. Guardar y Mostrar Datos Personalizados: Explica cómo guardar estos datos personalizados y cómo mostrarlos en la página del producto.
  6. Mostrar el Botón “Añadir al Carrito”: Detalla cómo mostrar el botón “Añadir al carrito” para el tipo de producto personalizado.
<?php
/**
 * Plugin Name: Custom Product Type
 * Plugin URI:
 * Description:
 * Version:
 * Author:
 * Author URI:
 * License:
 * License URI:
 */
/**
 * Register a custom product type on initialization.
 */
add_action('init', 'register_my_subscription_product_type');
/**
 * Class WC_Product_my_subscription
 * 
 * Define a custom product type.
 */
function register_my_subscription_product_type()
{
    class WC_Product_my_subscription extends WC_Product
    {
        /**
         * WC_Product_my_subscription constructor.
         *
         * @param mixed $product
         */
        public function __construct($product)
        {
            $this->product_type = 'my_subscription';
            parent::__construct($product);
        }
    }
}
/**
 * Add the custom product type to product type selector.
 *
 * @param array $types Existing product types.
 * @return array Modified product types.
 */
function add_my_subscription_product_type($types)
{
    $types['my_subscription'] = __('My Subscription');
    return $types;
}
add_filter('product_type_selector', 'add_my_subscription_product_type');
/**
 * Customize visibility of tabs in product data metabox.
 *
 * @param array $tabs Existing product data tabs.
 * @return array Modified product data tabs.
 */
function wcs_hide_attributes_data_panel($tabs)
{
    $tabs['general']['class'][] = 'show_if_my_subscription';
    $tabs['attribute']['class'][] = 'hide_if_my_subscription';
    $tabs['shipping']['class'][] = 'hide_if_my_subscription';
    $tabs['inventory']['class'][] = 'show_if_my_subscription';
    return $tabs;
}
/**
 * Display pricing fields for the custom product type.
 */
function my_subscription_custom_js()
{
    if ('product' != get_post_type()) :
        return;
    endif;
    ?>
    <script type='text/javascript'>
        jQuery(document).ready(function() {
            jQuery('.options_group.pricing').addClass('show_if_my_subscription').show();
            jQuery('.general_options').show();
        });
    </script>
<?php
}
add_action('admin_footer', 'my_subscription_custom_js');
/**
 * Add custom product data tab.
 *
 * @param array $tabs Existing product data tabs.
 * @return array Modified product data tabs.
 */
function my_subscription_product_tab($tabs)
{
    $tabs['my_subscription'] = array(
        'label' => __('My Subscription Tab', 'dm_product'),
        'target' => 'my_subscription_product_options',
        'class' => 'show_if_my_subscription_product',
    );
    return $tabs;
}
add_filter('woocommerce_product_data_tabs', 'my_subscription_product_tab');
/**
 * Content for custom product data tab.
 */
function QL_custom_product_options_product_tab_content()
{
    ?><div id='my_subscription_product_options' class='panel woocommerce_options_panel'>
        <div class='options_group'><?php
                woocommerce_wp_checkbox(array(
                    'id' => '_enable_custom_product',
                    'label' => __('Enable Subscription'),
                ));
                woocommerce_wp_text_input(
                    array(
                        'id' => 'my_subscription_product_info',
                        'label' => __('Enter Subscription Details', 'dm_product'),
                        'placeholder' => '',
                        'desc_tip' => 'true',
                        'description' => __('Enter subscription details.', 'dm_product'),
                        'type' => 'text',
                    )
                );
                ?>
        </div>
    </div>
<?php
}
add_action('woocommerce_product_data_panels', 'QL_custom_product_options_product_tab_content');
/**
 * Save custom product data.
 *
 * @param int $post_id Product ID.
 */
function save_my_subscription_product_settings($post_id)
{
    $engrave_text_option = isset($_POST['_enable_custom_product']) ? 'yes' : 'no';
    update_post_meta($post_id, '_enable_custom_product', esc_attr($engrave_text_option));
    if (!empty($_POST['my_subscription_product_info'])) {
        update_post_meta($post_id, 'my_subscription_product_info', esc_attr($_POST['my_subscription_product_info']));
    }
}
add_action('woocommerce_process_product_meta', 'save_my_subscription_product_settings');
/**
 * Display custom product data in frontend.
 */
function my_subscription_product_front()
{
    global $product;
    if ('my_subscription' == $product->get_type()) {
        echo "<strong>Subscription Type: </strong>" . esc_html(get_post_meta($product->get_id(), 'my_subscription_product_info', true));
    }
}
add_action('woocommerce_single_product_summary', 'my_subscription_product_front');
/**
 * Display add to cart button for the custom product type.
 */
add_action("woocommerce_my_subscription_add_to_cart", function () {
    do_action('woocommerce_simple_add_to_cart');
});

Conclusión

Con la habilidad de crear tipos de productos personalizados en WooCommerce, las posibilidades son prácticamente ilimitadas. Puedes adaptar tu tienda en línea para que se ajuste perfectamente a las necesidades de tus clientes y productos.

¿Estás listo para llevar tu tienda WooCommerce al siguiente nivel? Comienza a implementar tipos de productos personalizados hoy mismo. Si necesitas ayuda adicional o un desarrollo personalizado, no dudes en ponerte en contacto con nosotros.

Suscripción al Newsletter

Si estás interesado en aprender más sobre WordPress, no olvides suscribirte a nuestro blog para recibir las últimas noticias y consejos sobre WordPress, alojamiento web.

¿Necesitas un Hosting para tu Web?

Anuncio - Hosting Web de SiteGround - Diseñado para una fácil administración web. Haz clic para saber más.

Anuncio - Hosting Web de SiteGround - Diseñado para una fácil administración web. Haz clic para saber más.

¿Necesitas ayuda con un Proyecto Web o un Plugin a Medida?

Si ¿Necesitas ayuda con algún proyecto web? No dudes en contactarme desarrollo soluciones completas y personalizadas con WordPress y PHP, con herramientas y procesos modernos, utilizando HTML, CSS, SCSS, PHP, JavaScript, Bootstrap y más… Si ¿Estás listo? ¡Envíame un mensaje y hablemos de tu proyecto web!