Puedes hacerlo con los Hooks de WooCoommmerce.
hace poco tuve este problema y lo resolvi sin ningún complemente, unicamente con código.
Exactamente no es lo que yo tengo, ya que he añadido un texto y una imagen, pero eso ya juegas tu con ello, simplemente con los datos de hooks
, y un poco de CSS, puedes cambiar la posición de estos elementos a tu antojo.
En este enlace veras como manejar los hook
(Ganchos) de WooCommerce
Primero crearía un metabox en la página de producto:
// Registramos el Metabox
function custom_product_metabox(){
// Memberships Metabox
add_meta_box(
'product-custom-settings',
__( 'Producto', 'textdomain' ),
'custom_product_callback',
'product'
);
}
add_action( 'add_meta_boxes', 'custom_product_metabox' )
Luego crearía los campos a la pagina de de cada productos para el metabox:
Con este yo he añadido una imagen y un texto, el cual puedes añadir uno diferente a cada productos
// Agregamos los campos
function custom_product_callback(){
$screen = get_current_screen();
if ( $screen->action !== 'add' ) :
global $post;
$post_id = $post->ID;
$logo = get_post_meta( $post_id, 'ct_product_logo', true );
$texto = get_post_meta( $post_id, 'ct_product_title', true );
else :
$logo = '';
$texto = '';
endif;
// Logo
echo '<div class="trn-form-control">';
echo '<div class="trn-row">';
echo '<div class="trn-col-2"><label>Logo</label></div>';
echo '<div class="trn-col-10">';
echo '<input type="text" id="custom-product-logo" name="custom-product-logo" value="' . $logo . '">';
echo '</div>';
echo '</div>';
echo '</div>';
// Titulo
echo '<div class="trn-form-control">';
echo '<div class="trn-row">';
echo '<div class="trn-col-2"><label>Titulo</label></div>';
echo '<div class="trn-col-10">';
echo '<input type="text" id="custom-product-title" name="custom-product-title" value="' . $texto . '">';
echo '</div>';
echo '</div>';
echo '</div>';
}
Y finalmente con la ayuda de los hook , muestras estos detalles en el producto.
Como veras en la documentación, puedes cambiar de posición , y luego personalizar.
Suerte
// Mostramos los datos
function show_custom_product_data(){
global $product;
$post_id = $product->get_id();
$logo = get_post_meta( $post_id, 'ct_product_logo', true );
$texto = get_post_meta( $post_id, 'ct_product_title', true );
if ( $logo ) :
echo '<img class="your-class" src="' . $logo . '">';
endif;
if ( $texto ) :
echo '<p class="your-p-class">' . $texto . '<p>';
endif;
}
add_action( 'woocommerce_after_shop_loop_item_title', 'show_custom_product_data' );