NB : Faire une sauvegarde de votre thème, de votre fichier et/ou votre base de données avant d’ajouter ces fonctions tutoriels.
Publié le : 07 mai 2022 - Modifié le : 7 mai 2022
Temps de lecture : 6 minutes, 28 seconds - 268 mots
Partager la publication "Ajouter une métadonnée (Dernières mises à jour) – Produit Woocommerce"
Nous avons dans ce tutoriel, eu l’idée de créer une nouvelle metabox WordPress pour nos produits de téléchargements WooCommerce.
Notre donnée nous permettrait par exemple d’afficher la date où le nombre de jours que les mises à jour du produit ont été fait.
Par exemple vous vendez des fichiers téléchargeables. Vous souhaitez, donc, afficher à vos clients la date où la dernière version du produit a été mise en ligne.
Créer une classe pour ajouter une metabox WordPress
Comme vous allez voir, notre metabox a un champ date avec le format par défaut.
// Meta Box Class: Woocommerce Product Update
class woocommerceproductupMetabox {
private $screen = array(
'product',
);
private $meta_fields = array(
array(
'label' => 'Recent updates for this product ?',
'id' => 'woocommerce-update-product',
'default' => 'Aujourdhui',
'type' => 'date',
),
);
public function __construct() {
add_action( 'add_meta_boxes', array( $this, 'add_meta_boxes' ) );
add_action( 'save_post', array( $this, 'save_fields' ) );
}
public function add_meta_boxes() {
foreach ( $this->screen as $single_screen ) {
add_meta_box(
'woocommerceproductup',
__( 'Woocommerce Product Update', 'textdomain' ),
array( $this, 'meta_box_callback' ),
$single_screen,
'normal',
'high'
);
}
}
public function meta_box_callback( $post ) {
wp_nonce_field( 'woocommerceproductup_data', 'woocommerceproductup_nonce' );
$this->field_generator( $post );
}
public function field_generator( $post ) {
$output = '';
foreach ( $this->meta_fields as $meta_field ) {
$label = '<label for="' . $meta_field['id'] . '">' . $meta_field['label'] . '</label>';
$meta_value = get_post_meta( $post->ID, $meta_field['id'], true );
if ( empty( $meta_value ) ) {
if ( isset( $meta_field['default'] ) ) {
$meta_value = $meta_field['default'];
}
}
switch ( $meta_field['type'] ) {
default:
$input = sprintf(
'<input %s id="%s" name="%s" type="%s" value="%s">',
$meta_field['type'] !== 'color' ? 'style="width: 100%"' : '',
$meta_field['id'],
$meta_field['id'],
$meta_field['type'],
$meta_value
);
}
$output .= $this->format_rows( $label, $input );
}
echo '<table class="form-table"><tbody>' . $output . '</tbody></table>';
}
public function format_rows( $label, $input ) {
return '<tr><th>'.$label.'</th><td>'.$input.'</td></tr>';
}
public function save_fields( $post_id ) {
if ( ! isset( $_POST['woocommerceproductup_nonce'] ) )
return $post_id;
$nonce = $_POST['woocommerceproductup_nonce'];
if ( !wp_verify_nonce( $nonce, 'woocommerceproductup_data' ) )
return $post_id;
if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE )
return $post_id;
foreach ( $this->meta_fields as $meta_field ) {
if ( isset( $_POST[ $meta_field['id'] ] ) ) {
switch ( $meta_field['type'] ) {
case 'email':
$_POST[ $meta_field['id'] ] = sanitize_email( $_POST[ $meta_field['id'] ] );
break;
case 'text':
$_POST[ $meta_field['id'] ] = sanitize_text_field( $_POST[ $meta_field['id'] ] );
break;
}
update_post_meta( $post_id, $meta_field['id'], $_POST[ $meta_field['id'] ] );
} else if ( $meta_field['type'] === 'checkbox' ) {
update_post_meta( $post_id, $meta_field['id'], '0' );
}
}
}
}
if (class_exists('woocommerceproductupMetabox')) {
new woocommerceproductupMetabox;
};
Notre metabox côté visuel dans le produit WooCommerce
Ajouter notre date de mises à jour dans le loop produit
Donc nous allons utiliser le hook woocommerce_before_shop_loop_item_title
Cet hook va nous permettre de positionner notre get_post_meta du nom de woocommerce-update-product avant le titre du produit dans le loop, c’est-à-dire les résultats des produits dans la page boutique.
On peut customiser notre date. Dans notre hook ci-dessous, nous allons montrer la date en format que nous souhaitions.
add_action( 'woocommerce_before_shop_loop_item_title', 'themespress_field_display_below_title', 2 );
function themespress_field_display_below_title(){
global $product;
// Get the custom field value
$custom_field = get_post_meta( $product->get_id(), 'woocommerce-update-product', true );
// Display
if( ! empty($custom_field) ){
echo '<p class="last-updates" style="position:absolute;top:30px;background:#f95b26;color:white;padding:2px 5px">' . 'MAJ : ' . (new DateTime($custom_field))->format('d M Y') . '</p>';
}
}Ou bien afficher le nombre de jours que produit WooCommerce a été mis à jour en modifiant le hook.
add_action( 'woocommerce_before_shop_loop_item_title', 'themespressdeux_field_display_below_title', 2 );
function themespressdeux_field_display_below_title(){
global $product;
// Get the custom field value
$custom_field = get_post_meta( $product->get_id(), 'woocommerce-update-product', true );
// Display
$now = time(); // Current time
$your_date = strtotime($custom_field); // The first date
$datediff = abs($now - $your_date); // Gives absolute Value
if( ! empty($custom_field) ){
echo '<p class="last-updates" style="position:absolute;top:30px;background:#f95b26;color:white;padding:2px 5px">' . 'MAJ : ' . floor($datediff/(60*60*24)) . ' jour(s)' . '</p>';
}
}Nous vous invitons à ne pas copier deux fois le hook. Choisissez soit le premier ou deuxième exemple.
Afficher le get_post_meta dans le produit WooCommerce
Il nous reste maintenant à utiliser le hook woocommerce_before_single_product_summary
afin de montrer notre information sur le produit consulté.
add_action( 'woocommerce_before_single_product_summary' , 'themespress_updates_date_before_product_title', 5 );
function themespress_updates_date_before_product_title() {
global $product;
// Get the custom field value
$custom_field = get_post_meta( $product->get_id(), 'woocommerce-update-product', true );
// Display
$now = time(); // Current time
$your_date = strtotime($custom_field); // The first date
$datediff = abs($now - $your_date); // Gives absolute Value
if( ! empty($custom_field) ){
echo '<p class="last-updates" style="position:absolute;top:-40px;right:0;background:#f95b26;color:white;padding:2px 5px">' . 'MAJ : ' . floor($datediff/(60*60*24)) . ' jour(s)' . '</p>';
}
}