¡Hola a todos los entusiastas del comercio electrónico! Si deseas resaltar los productos con envío gratuito en tu tienda Woocommerce, estás en el lugar correcto. En este artículo, te mostraré cómo agregar la etiqueta de «Envío Gratis» a tus productos utilizando un plugin gratuito. Es una excelente manera de atraer a tus clientes y aumentar las ventas. ¡Comencemos!
Paso 1: Instalar y Activar el Plugin Code Snippets
1. Inicia sesión en tu panel de administración de WordPress.
2. En el menú de WordPress, ve a «Plugins» y selecciona «Añadir nuevo».
3. En el campo de búsqueda, escribe «Code Snippets» y presiona «Buscar plugins».
4. Instala y activa el plugin «Code Snippets» en tu sitio.
Paso 2: Agregar un Nuevo Snippet
1. Después de activar el plugin, verás un nuevo menú llamado «Snippets» en tu panel de administración de WordPress. Haz clic en «Snippets».
2. Luego, selecciona «Añadir nuevo».
3. Dale un nombre descriptivo, por ejemplo, «Envío Gratis», para que puedas identificarlo fácilmente.
Paso 3: Insertar el Código
Ahora, vamos a insertar el código que mostrará la etiqueta de «Envío Gratis» en tus productos.
1. Copia y pega el siguiente código en el campo de código:
add_action( ‘woocommerce_single_product_summary’, ‘custom_display_free_shipping_notice’, 25 );
function custom_display_free_shipping_notice() {
global $product;
// Define el umbral de precio para el envío gratis
$free_shipping_threshold = 10; // $10
if ( $product->get_price() > $free_shipping_threshold ) {
echo ‘<p class=»free-shipping-notice»>Envío Gratis</p>’;
}
}
Este código mostrará la etiqueta «Envío Gratis» en los productos que superen el precio de $10, pero puedes personalizar este valor según tus necesidades.
2. Guarda el snippet.
Paso 4: Personalizar el Estilo de la Etiqueta
Para darle estilo a la etiqueta de «Envío Gratis», vamos a utilizar CSS personalizado.
1. En el panel de administración de WordPress, ve a «Personalizar».
2. Busca la opción que dice «CSS Adicional» o similar, dependiendo de tu tema. Esto te permitirá agregar estilos personalizados.
3. Copia y pega el siguiente código CSS en el campo de CSS adicional:
.free-shipping-notice {
display: inline-block;
background-color: #00b200;
color: #fff;
padding: 4px 9px;
border-radius: 5px;
font-weight: bold;
margin-top: 4px;
}
Este código personalizará el aspecto de la etiqueta de «Envío Gratis», pero puedes ajustar los estilos según tus preferencias.
4. Guarda tus cambios.
Paso 5: Observa el Resultado
¡Estás listo! Refresca la página de un producto en tu tienda Woocommerce para ver la etiqueta de «Envío Gratis» con un estilo atractivo. Esto ayudará a tus clientes a identificar rápidamente los productos que ofrecen envío gratuito.
Si deseas ver una demostración en video detallada de todo este proceso, te invitamos a ver nuestro tutorial en YouTube.
Esperamos que esta guía te ayude a destacar los productos con envío gratuito en tu tienda y atraer a más compradores. ¡Buena suerte con tu tienda en línea!