NB : Faire une sauvegarde de votre thème, de votre fichier et/ou votre base de données avant d’ajouter ces fonctions tutoriels.

Ajouter une métadonnée (Dernières mises à jour) - Produit Woocommerce
Difficile

---- Cet article a été modifié : 7 mai 2022

Temps de lecture : 6 minutes, 28 seconds - 268 mots

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 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 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

Metabox pour vos produits 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)) . '&nbsp;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)) . '&nbsp;jour(s)' . '</p>';
    }
}

Laissez un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>