En la creciente esfera del comercio electrónico, la capacidad de destacar productos de manera efectiva puede marcar la diferencia entre una transacción exitosa y una oportunidad perdida. Este conjunto de funciones personalizadas para WooCommerce, el plugin de comercio electrónico para WordPress, proporciona a los administradores de tiendas una herramienta invaluable para resaltar productos de manera única.
Con la introducción de campos personalizados, se brinda la flexibilidad necesaria para adaptar la presentación de productos a las estrategias específicas de marketing y promoción. Los campos «Color de la Banda» y «Texto de la Banda» permiten la creación de distintivos visuales que pueden ser utilizados para destacar ofertas especiales, descuentos exclusivos u otras características clave de los productos. Este enfoque no solo enriquece la experiencia del usuario en la interfaz de administración de productos, sino que también presenta oportunidades creativas para mejorar la visibilidad de productos específicos en la tienda en línea.
La capacidad de personalizar visualmente productos es especialmente valiosa en escenarios donde se busca resaltar promociones temporales o características únicas. Además, este conjunto de funciones demuestra cómo la flexibilidad de WooCommerce y WordPress permite a los propietarios de tiendas adaptarse a estrategias de marketing dinámicas y mantener una presencia en línea impactante y atractiva.
El siguiente código tienes que agregarlo en el functions.php de tu tema hijo o utilizar un plugin como CODE SNIPPETS.
<?php
/**
* Añadir campos personalizados para color y texto en la página de edición de productos.
*/
function custom_add_product_custom_fields() {
woocommerce_wp_text_input(
array(
'id' => '_custom_badge_color',
'label' => 'Color de la Banda',
'placeholder' => 'Ej: #ff0000',
'desc_tip' => 'true',
'description' => 'Inserta el color de la banda para el distintivo.',
)
);
woocommerce_wp_text_input(
array(
'id' => '_custom_badge_text',
'label' => 'Texto de la Banda',
'placeholder' => 'Ej: Oferta Especial',
'desc_tip' => 'true',
'description' => 'Inserta el texto de la banda para el distintivo.',
)
);
}
add_action( 'woocommerce_product_options_general_product_data', 'custom_add_product_custom_fields' );
/**
* Guardar los valores de los campos personalizados al guardar el producto.
*/
function custom_save_product_custom_fields( $product_id ) {
$custom_badge_color = sanitize_text_field( $_POST['_custom_badge_color'] );
$custom_badge_text = sanitize_text_field( $_POST['_custom_badge_text'] );
update_post_meta( $product_id, '_custom_badge_color', $custom_badge_color );
update_post_meta( $product_id, '_custom_badge_text', $custom_badge_text );
}
add_action( 'woocommerce_process_product_meta', 'custom_save_product_custom_fields' );
/**
* Mostrar el distintivo personalizado en la tienda.
*/
function custom_display_custom_badge() {
global $product;
$custom_badge_color = get_post_meta( $product->get_id(), '_custom_badge_color', true );
$custom_badge_text = get_post_meta( $product->get_id(), '_custom_badge_text', true );
if ( ! empty( $custom_badge_color ) && ! empty( $custom_badge_text ) ) {
?>
<style>
.custom-badge-<?php echo esc_attr( $product->get_id() ); ?> {
background-color: <?php echo esc_attr( $custom_badge_color ); ?>;
color: #fff;
padding: 5px 10px;
position: absolute;
top: 10px;
left: 10px;
z-index: 999;
border-radius: 5px;
font-size: 14px;
}
</style>
<?php
echo '<span class="custom-badge-' . esc_attr( $product->get_id() ) . '">' . esc_html( $custom_badge_text ) . '</span>';
}
}
add_action( 'woocommerce_before_shop_loop_item_title', 'custom_display_custom_badge', 10 );
add_action( 'woocommerce_product_thumbnails', 'custom_display_custom_badge', 10 );
Lenguaje del código: HTML, XML (xml)Entendiendo el Código
1. Añadir campos personalizados en la página de edición de productos:
Se incorporan dos campos adicionales en la interfaz de edición de productos dentro del panel de administración de WordPress. Estos campos, denominados «Color de la Banda» y «Texto de la Banda», tienen como propósito permitir a los administradores de la tienda especificar información personalizada que se relaciona con un distintivo visual asociado a cada producto.
- Color de la Banda: Permite ingresar un código de color hexadecimal que determinará el fondo del distintivo.
- Texto de la Banda: Permite ingresar un texto que se mostrará en el distintivo, como por ejemplo «Oferta Especial».
2. Guardar los valores de los campos personalizados al guardar el producto:
Cuando se guarda un producto en el sistema, los valores introducidos en los campos personalizados son recopilados y almacenados en la base de datos de WordPress. Estos valores se asocian específicamente con el producto correspondiente, garantizando que la información del distintivo esté vinculada de manera adecuada.
- Color de la Banda: Se guarda el código de color introducido.
- Texto de la Banda: Se guarda el texto introducido.
3. Mostrar el distintivo personalizado en la tienda:
Al mostrar un producto en la tienda, se incorpora un distintivo visual personalizado según la información almacenada previamente.
- Se recupera el color y el texto del distintivo asociados al producto.
- Si tanto el color como el texto están disponibles, se genera un elemento visual (etiqueta) con el texto dentro y un fondo coloreado con el color especificado.
- Este distintivo se muestra en dos ubicaciones específicas en la página de la tienda: antes del título del producto y en la sección de miniaturas del producto.
- El diseño del distintivo incluye características como posición, tamaño, colores y estilo de borde para asegurar su visibilidad y atractivo visual. Estos estilos son aplicados dinámicamente a través de código CSS en línea.
Si necesitas adaptar el código a las necesidades de tu proyecto o agregar una funcionalidad específica a tu página web no dudes en contactar conmigo.
Nos vemos en el siguiente tutorial.
Un saludo.
Deja tus opiniones o dudas en los comentarios.