Productos con campos personalizados en Woocommerce

Share on facebook
Share on twitter
Share on whatsapp

Hola a todos y bienvenidos a un nuevo articulo, en este caso veremos como crear campos personalizados en los productos de Woocommerce, esto nos ayudara a especificar de una mejor forma y más detallada los posibles atributos o variaciones que pueda tener mi producto, sin más palabras vamos a ello.

-¿Qué complemento o plugin necesito?

Así es, en esta ocasión necesitaremos un plugin que nos ayudara a crear estos campos con todos sus atributos, el mismo se llama Advanced Custom Fields, lo obtendremos al ingresar en el apartado plugins, ahí mismo lo buscaremos, seguido de esto le damos clic en instalar y luego en activar, como esta en la siguiente imagen.

Imagen del plugin advance custom fields

– Añadiendo campos con Advanced Custom Fields

Después de añadir el plugin procederemos a crear los nuevos campos, el acceso al mismo se creara en nuestro menú en la parte inferior izquierda, lo podremos encontrar con el texto Custom Fields, una vez entramos a el nos aparecerá la siguiente pantalla en la cual procederemos a dar clic en Add New. 

Una vez estemos dentro lo primero que vamos a hacer es crear el Field Group, a este le daremos un nombre el cual nos ayudara a identificar el grupo de campos que coloque dentro del mismo, después de crear este primer item procederemos a crear los campos dando clic en el botón que dice «+Añadir Campo». Ahí empezaremos a crear cada uno de los campos que necesitemos como lo muestro en la siguiente imagen, en este ejemplo quise poner los atributos que podría tener una camiseta.

– Definiendo el tipo de Post Type

Después de crear nuestros campos debemos hacer algo sumamente importante, y es definir que tipo de post es al que pertenecen los mismos, para ello vamos a ir al campo desplegable que se encuentra al frente del valor post type y seleccionaremos el item product como lo muestra la siguiente imagen:

Imagene donde se selecciona el tipo de post

Después de hacer esto no queda más que publicar nuestros cambios y al ir a la edición de cualquier producto veremos como aparecen estos nuevos campos de la siguiente forma:

 

– Mostrando campos en el Front-end del sitio web

Una vez hecho todo lo anterior, no es suficiente para que nuestros campos nuevos se visualicen en el Front-end del sitio, o lo que es lo mismo, nuestros clientes o usuarios simplemente no podrán verlos, afortunadamente para ello hay una solución y la misma la hayamos en el siguiente código: 

add_action( 'woocommerce_single_product_summary', "wpf_atributos_de_camisetas", 8 );

function wpf_atributos_de_camisetas(){
   
  if (function_exists('get_field')){
    echo "<p><strong>Color:</strong> ". get_field('color')."</p>"; 
    echo "<p><strong>Talla: </strong>". get_field('talla')."</p>"; 
    echo "<p><strong>Marca: </strong>". get_field('marca')."</p>"; 
    
  }
  
}

En el anterior código utilizamos el hook woocommerce_single_product_sumary que hace referencia a la función wpf_atributos_de_camisetas con una prioridad que es el número 8 el cual nos indica en que parte de la plantilla del theme vamos a ver representados nuestros campos.

Por ultimo lo que se hace es verificar si la función get_field existe, esta función es del Plugin Advanced Custom Fields, depues de hacer todo esto nuestro resultado final será el siguiente:

Y eso es todo, al finalizar todo el proceso ya tienes los campos personalizados, si aún tienes alguna duda mira el video en la parte superior.

Hasta el próximo post.

Felipe Calderón

Felipe Calderón

Soy Felipe Calderón y me encantaría ayudarte, empezando desde cero a crear tu propia web y conseguir clientes, ventas y dinero con tu sitio ¿Quieres saber cómo?. Suscribete a continuación 👇

Indice de Contenido

Utilizar Beaver Builder con Genesis Child Theme

Hola a todos, el día de hoy quiero mostrarles como se puede integran el constructor Web Beaver Builder con el …

Review de Beaver Builder 2018 (Regalo plugin con actualizaciones)

Nota: Si quieres que te regale el plugin, suscribete a mi canal de youtube y en los comentarios déjame tu correo, …