Intégration Ingenico / Ogone dans Woocommerce

Ingenico ePayments est la solution de paiement présente dans 200 pays et adopté par 60 000  e-commerçant et présent sur les terminaux de paiement des commerçants. Dans ce tuto je vais vous apprendre comment intégrer Ingenico dans votre site e-commerce avec woocommerce.

 

Votre compte Ingénico

Si vous êtes commerçant et que vous disposez un contrat avec Ingénico pour votre TPE vous devrez créer un second compte qui sera dédié à votre boutique en ligne (Ingenico ePayments), car les paramètre ne sont pas les mêmes que les TPE.

 

La passerelle de paiement Ingenico pour woocommerce

 

Il existe plusieurs plugins payant et gratuit :

 

Pour ce tuto je vais utiliser le plugin Pronamic Pay version gratuite qui convient très bien pour l’intégration d’un paiement par carte bancaire.  Après la création et validation de votre compte Ingenico vous aurez deux accès un compte test pour faire des essais de paiement et un compte réel, les deux se paramètre de la même façon seul les accès sont différents.

Connectez-vous à votre compte Ingenico pour récupérer les informations suivantes :

  • ID utilisateur API
  • SHA-IN Pass phrase
  • SHA-OUT Pass phrase
  • Sélection de Algorithme de hachage

Le PSPID et le mot de passe vous ai fourni par Ingenico.

 

ID utilisateur API

Pour récupérer votre ID Utilisateur vous allez dans Configuration —> Mot de passe.

 

SHA-IN Pass phrase

Pour récupérer votre SHA-IN Pass phrase vous allez dans Configuration —> information technique —> Contrôle de données et d’origine. Puis dans contrôles pour e-commerce indiquer l’url de votre boutique. Puis dans Clé SHA-IN cliquer sur visible pour la récupérer.

 

 

SHA-OUT Pass phrase

Pour récupérer votre SHA-IN Pass phrase vous allez dans Configuration —> information technique —> Retour d’information sur la transaction. Dans cette partie vous laissez les paramètres par défaut sauf dans la section Paramètres dynamiques du commerce en ligne où vous ajouté les commandes suivantes :

- ACCEPTANCE
- AMOUNT
- BRAND
- CARDNO
- CN
- COMPLUS
- CURRENCY
- DCC_COMMPERCENTAGE
- DCC_CONVAMOUNT
- DCC_CONVCCY
- DCC_EXCHRATE
- DCC_EXCHRATESOURCE
- DCC_EXCHRATETS
- DCC_INDICATOR
- DCC_MARGINPERCENTAGE
- ED
- IP
- NCERROR
- ORDERID
- PAYID
- PAYIDSUB
- PM
- STATUS

Puis faite sauvegarder.

Ensuite allez dans la section Tous les modes de soumission pour récupérer votre Clé SHA-OUT cliquer sur visible pour l’obtenir.

 

 

Sélection de Algorithme de hachage

Pour sélectionner l’algorithme de hachage vous allez dans Configuration —> information technique —> Paramètres globaux de sécurité et vous sélectionner SHA-256 et sauvegarder.

 

 

Maintenant que vous avez toutes les informations techniques installer le plugin Pronamic Pay puis activé le, vous aurez un onglet payer dans le menu admin de wordpress avec les sous-menus suivant :

  • Tableau de bord
  • Paiement
  • Abonnements
  • Rapports
  • Formulaire
  • Configurations
  • Réglages

Allez dans configurations puis faite ajouter (Configurations de passerelle de paiement)

  • Prestataire pour le paiement: Sélectionner Ingenico/Ogone – e-Commerce
  • Modus vous sélectionner live pour le paiement réel
  • Sélectionnez l’algorithme de hachage : SHA-256

Puis dans générale complétez les informations suivantes récupéré sur votre compte Ingenico :

  • PSPID
  • ID utilisateur API
  • Votre mot de passe utilisateur API
  • SHA-IN Pass phrase
  • SHA-OUT Pass phrase

 

Ensuite faite un test dans la section Test ajouté un montant quelconque puis cliquer sur Test pour vérifier la passerelle entre votre site et Ingenico.

 

IMAGE

 

Réglage Woocommerce

 

Une fois les vérifications faites, vous allez activez le paiement par carte bancaire dans woocommerce :

Woocommerce  puis Réglages et l’onglet ‘ Paiement ‘  Activé  Pronamic – Carte de crédit

 

Maintenant vous disposé d’un paiement par carte bancaire pour votre boutique en ligne.

Supprimer le bouton ajouter au panier dans catégorie produit dans Woocommerce

Avec le code ci-dessous vous allez pouvoir supprimer le bouton ajouter au panier pour une catégorie de produit.

 

Il faudra juste ajouter le slug de la catégorie concerné, pour l’exemple j’ai pris la catégorie :

 

Montres slug est montres

function naxialis_custom_buy_buttons(){

   $product = get_product();
	
	// slug de la catégorie exemple montres

   if ( has_term( 'montres', 'product_cat') ){

   // suppression des boutons ajouter au panier

   remove_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart' );

   remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30 );

   remove_action( 'woocommerce_simple_add_to_cart', 'woocommerce_simple_add_to_cart', 30 );

   remove_action( 'woocommerce_grouped_add_to_cart', 'woocommerce_grouped_add_to_cart', 30 );

   remove_action( 'woocommerce_variable_add_to_cart', 'woocommerce_variable_add_to_cart', 30 );

   remove_action( 'woocommerce_external_add_to_cart', 'woocommerce_external_add_to_cart', 30 );

   }

}

add_action( 'wp', 'naxialis_custom_buy_buttons' );

Comment modifier les boutons du widget panier dans woocommerce

Dans se petit tuto nous allons voir comment changer le texte et les liens des boutons ‘voir le panier’ et ‘Valider ma commande’. Pour appliquer ses modifications vous allez éditer le fichier function.php de votre thème WordPress.

 

Première étape  retirer les anciens boutons

Pour retirer les anciens boutons je vais utiliser la fonction remove_action :

remove_action( 'woocommerce_widget_shopping_cart_buttons', 'woocommerce_widget_shopping_cart_button_view_cart', 10 );
remove_action( 'woocommerce_widget_shopping_cart_buttons', 'woocommerce_widget_shopping_cart_proceed_to_checkout', 20 );

 

Deuxième étape création du code des nouveaux boutons

Pour créer nos nouveau boutons ajouter le code suivant toujours dans le fichier function.php de votre thème WordPress.

// Bouton panier
function custom_widget_shopping_cart_button_view_cart() {
    $original_link = wc_get_cart_url();
   // $custom_link = home_url( '/cart/?id=1' ); // Changer le lien
    echo '<a href="' . esc_url( $original_link ) . '" class="button wc-forward">' . esc_html__( 'Mon panier', 'woocommerce' ) . '</a>';
}

// Bouton paiement
function custom_widget_shopping_cart_proceed_to_checkout() {
    $original_link = wc_get_checkout_url();
    //$custom_link = home_url( '/checkout/?id=1' ); // Changer le lien
    echo '<a href="' . esc_url($original_link ) . '" class="button checkout wc-forward">' . esc_html__( 'Passer au paiement', 'woocommerce' ) . '</a>';
}

J’ai mis en commentaire $custom_link cette variable vous permet de changer les urls des bouton si c’est le cas il faudra remplacer $original_link  par $custom_link et personnalisé le lien de cette variable.

 

Troisième étape ajout des nouveaux boutons

Pour ajouter mes nouveaux boutons avec la fonction add_action il faudra ajouter le code suivant :

add_action( 'woocommerce_widget_shopping_cart_buttons', 'custom_widget_shopping_cart_button_view_cart', 10 );
add_action( 'woocommerce_widget_shopping_cart_buttons', 'custom_widget_shopping_cart_proceed_to_checkout', 20 );

Comment changer le nombre de produits apparentés dans woocommerce

Pour changer le nom de produits apparentés dans woocommerce il vous faudra éditer le fichier function.php de votre thème WordPress puis ajouter le code suivant :

/**
 * Change number of related products
 */ 
function woo_related_products_limit() {
  global $product;
	
	$args['posts_per_page'] = 6;
	return $args;
}
add_filter( 'woocommerce_output_related_products_args', 'jk_related_products_args' );
  function jk_related_products_args( $args ) {
	$args['posts_per_page'] = 4; // produits apparentés
	$args['columns'] = 2; // Nombre de colonnes 2
	return $args;
}

A la ligne 12 vous modifier le nombre de produit a affiché.
Et a ligne 13 vous ajuster le nombre de colonnes.

Source : docs.woocommerce.com

Changer le nombre de produits par page dans Woocommerce

Par défaut woocommerce affiche 12 produits par page, pour changer le nombre de produits il ajouter un filtre sur la fonction de base de woocommerce loop_shop_per_page pour la modifier ajouter le code suivant dans le fichier function.php de votre thème WordPress :

Return 24 est nombre de produits a affiché.

add_filter( 'loop_shop_per_page', create_function( '$cols', 'return 24;' ), 20 );

Ajouter vos customs post type a la liste des pages statique

Pour ajouter vos cutoms post type a la liste déroulante des pages statique pour définir une page d’accueil (Réglages – Lecture ) ajouter le code suivant dans le fichier function.php de votre thème WordPress.

/* ------------------------------------------------------------------*/
/* STATIC PAGE CUSTOM POST TYPE */
/* ------------------------------------------------------------------*/	

function wpa18013_add_pages_to_dropdown( $pages, $r ){
    if('page_on_front' == $r['name']){
        $args = array(
            'post_type' => 'landingpage'
        );
        $stacks = get_posts($args);
        $pages = array_merge($pages, $stacks);
    }

    return $pages;
}
add_filter( 'get_pages', 'wpa18013_add_pages_to_dropdown', 10, 2 );



function enable_front_page_stacks( $query ){
    if('' == $query->query_vars['post_type'] && 0 != $query->query_vars['page_id'])
        $query->query_vars['post_type'] = array( 'page', 'landingpage' );
}
add_action( 'pre_get_posts', 'enable_front_page_stacks' );

Woocommerce afficher les produits par ordre alphabétique sur la page commande

Pour afficher les produits par ordre alphabétique sur la page commande de vos clients ajouter le code suivant dans le fichier function.php de votre thème wordpress.

Pour trier par ordre alphabétique je vais utiliser la fonction natsort qui implémente un algorithme de tri qui traite les chaînes alpha-numériques du tableau arraycomme un être humain tout en conservant la relation clé/valeur. C’est ce qui est appelé l'”ordre naturel”.

add_action( 'woocommerce_cart_loaded_from_session','nax_order_product'); 

function nax_order_product() {
    global $woocommerce;

	$products_in_cart = array();

	foreach ( $woocommerce->cart->cart_contents as $key => $item ) {
		$products_in_cart[ $key ] = $item['data']->get_title();
	}

	natsort( $products_in_cart );

	$cart_contents = array();

	foreach ( $products_in_cart as $cart_key => $product_title ) {

		$cart_contents[ $cart_key ] = $woocommerce->cart->cart_contents[ $cart_key ];
	}

	$woocommerce->cart->cart_contents = $cart_contents;

}

 

WordPress erreur HTTP avec Media Upload

Avec WordPress , après une mise à jour du serveur de votre hébergeur ou toute autre manipulation vous pouvez rencontrer un problème d’erreur HTTP avec le media upload.

Après avoir vérifié les permissions du dossier upload et ses sous dossier qui sont 755 et ajouté les lignes suivantes a votre fichier .htaccess pour débloquer certaines requêtes :

<IfModule mod_security.c>
SecFilterEngine Off
SecFilterScanPOST Off
</IfModule>

Toujours la même erreur !

Voici une autre solution en PHP qu’il faut ajouter dans votre fichier function.php de votre Thème WordPress se code va vérifier que les bibliothèques GD sont bien présentes et quelle peuvent être utilisé.

add_filter( 'wp_image_editors', 'change_graphic_lib' );

function change_graphic_lib($array) {
  return array( 'WP_Image_Editor_GD', 'WP_Image_Editor_Imagick' );
}