Hoe de knop Toevoegen aan winkelwagentje in WooCommerce te verbergen / verwijderen (stap voor stap)

Hoe de knop Toevoegen aan winkelwagentje in WooCommerce te verbergen en te verwijderen

Laten we beginnen met uitzoeken waarom u de knop Toevoegen aan winkelwagentje zou willen verbergen. Een van de meest effectieve manieren om het aankoopproces voor een specifiek product of bepaalde winkel uit te schakelen, is door de knop Toevoegen aan winkelwagentje te verwijderen. Ook al lijkt het misschien vreemd, het verwijderen van de knop Toevoegen aan winkelwagentje kan in sommige omstandigheden erg handig zijn.

Er zijn veel redenen waarom u de knop Toevoegen aan winkelwagentje van sommige pagina's van uw winkel zou willen verwijderen, naast het geven van meer aanpassingsopties:

  1. Wanneer een product niet op voorraad is of niet meer beschikbaar is
  2. Om de knop te deactiveren op basis van logica (dwz voor specifieke gebruikersrollen of producten, niet-ingelogde gebruikers, enz.)
  3. Het product is nog niet beschikbaar voor aankoop.
  4. Wanneer je wilt dat klanten die knop gebruiken in plaats van het standaard WooCommerce-aankoopproces om een ​​bericht te sturen of een interview te regelen.

Dit zijn slechts enkele voorbeelden van wanneer u de knop Toevoegen aan winkelwagentje in uw winkel wilt verbergen of verwijderen. Laten we beginnen met het verwijderen van de WooCommerce add-to-cart-knop uit uw winkel.

 

Hoe de knop Toevoegen aan winkelwagen in WooCommerce te verwijderen

In dit artikel leert u hoe u de knop 'Toevoegen aan winkelwagen' op verschillende manieren kunt verbergen. We laten u zien hoe u het volgende kunt doen om u meer opties te geven:

  1. Verwijder of verberg de knop Toevoegen aan winkelwagen op de hele site.
  2. Verberg de knop Toevoegen aan winkelwagen voor gebruikers die niet zijn ingelogd.
  3. Verwijder de knop Toevoegen aan winkelwagen op basis van gebruikersrollen.
  4. Verberg de knop Toevoegen aan winkelwagen op bepaalde producten.
  5. Schakel de knop Toevoegen aan winkelwagentje uit voor slechts enkele categorieën
  6. Verwijder de knop tijdelijk en deze zal na een datum weer verschijnen.
  7. Laten we elk van hen in verschillende secties bekijken.

Opmerking: aangezien we de belangrijkste WordPress-bestanden gaan bewerken, raden we aan een volledige back-up van uw site te maken voor het geval er iets misgaat. U kunt ook een child-thema gebruiken. Als je er nog geen hebt, kun je er zelf een maken of een plug-in voor een child-thema gebruiken.

1. Verwijder of verberg de knop Toevoegen aan winkelwagen op de hele site

Er zijn verschillende opties om de knop Toevoegen aan winkelwagentje volledig uit uw winkel te verwijderen. Een van de eenvoudigste is om het volgende script in uw . te plaatsen kinderthema's functies.php bestand:

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

We verwijderen de knop Toevoegen aan winkelwagen op de productpagina met de eerste verwijderactie() haak, en we doen hetzelfde op de winkelwagenpagina met de tweede. Het uitschakelen van de optie om producten te kopen is daarentegen een nettere en betrouwbaardere oplossing. U kunt de producten op deze manier onbeschikbaar maken voor aankoop en voorkomen dat gebruikers ze aan hun winkelwagentje toevoegen.

Met het volgende script kunt u dat doen en ervoor zorgen dat al uw producten in uw winkel niet meer kunnen worden gekocht:

add_filter( 'woocommerce_is_purchasable', '__return_false');

Hiermee wordt de knop WooCommerce Toevoegen aan winkelwagen uitgeschakeld, maar niet de knop zelf. Het zal eenvoudig worden vervangen door een Lees meer-knop, die gebruikers doorverwijst naar de productpagina, die vrij is van knoppen.

Als u naast de knop Toevoegen aan winkelwagentje ook de Lees meer-knop wilt verbergen, moet u een CSS-regel gebruiken. Klanten daarentegen zullen niets kunnen kopen omdat ze geen producten aan de winkelwagen kunnen toevoegen, zelfs niet als ze de browserontwikkelaarstool leren gebruiken om het zichtbaar te maken. Gebruik waar mogelijk de add filter() hook in plaats van de remove action() hook.

Lees verder: Hoe de tekst van de knop Toevoegen aan winkelwagentje te wijzigen

2. Verberg de knop Toevoegen aan winkelwagen voor gebruikers die niet zijn ingelogd

Stel dat u een tijdelijke promotie uitvoert voor uw geregistreerde gebruikers. U kunt een unieke bestemmingspagina maken en een e-mail sturen naar alleen uw geregistreerde gebruikers met de link, maar wat als ze deze met anderen delen? U kunt de knop Toevoegen aan winkelwagen alleen uit uw WooCommerce-winkel verwijderen voor niet-ingelogde gebruikers om dit te voorkomen en ervoor te zorgen dat u alleen kortingen geeft aan de beoogde consument. Om dit te doen, plak je het volgende script in het bestand Functions.php van je child-thema:

als (!is_user_logged_in()) {
// op productpagina
add_filter('woocommerce_is_purchasable', '__return_false');

}

We schakelen de knop Toevoegen aan winkelwagentje alleen uit voor niet-ingelogde gebruikers door de native WordPress-functie is gebruiker ingelogd () toe te passen.

3. Verwijder de knop Toevoegen aan winkelwagen op basis van gebruikersrollen

Een andere briljante optie is om de knop Toevoegen aan winkelwagentje uit te schakelen, afhankelijk van de rol van de gebruiker. Laten we eens kijken hoe we de knop onzichtbaar kunnen maken voor elke admin-gebruiker:

add_action('wp_loaded','get_user_role');

functie get_user_role(){

$current_user = wp_get_current_user();

  if(count($current_user->rollen)!==0){

  if($current_user->roles[0]=='beheerder'){

add_filter('woocommerce_is_purchasable', '__return_false');

}

}

}

Het WordPress-gebruikersobject wordt opgehaald en door het script worden er twee voorwaarden op toegepast. De eerste is om te bepalen of een gebruiker een rol heeft, en de tweede is om producten alleen niet beschikbaar te maken voor aankoop als de gebruikersrol overeenkomt met de rol die we specificeren (in dit geval beheerder). U kunt deze code zeker gebruiken en de rol wijzigen die u niet wilt zien met de knop Toevoegen aan winkelwagentje door de rol te bewerken in if($current_user->roles[0]=='your_role'){.

4. Verberg de knop Toevoegen aan winkelwagen op bepaalde producten

Stel dat u bepaalde artikelen niet meer op voorraad heeft en de knop Toevoegen aan winkelwagentje voor die artikelen tijdelijk wilt verbergen.

Kopieer en plak het volgende script in het bestand Functions.php van het child-thema om de knop voor specifieke producten te verwijderen:

add_filter('woocommerce_is_purchasable', 'filter_is_purchasable', 10, 2);

functie filter_is_purchasable($is_purchasable, $product) {

wereldwijd $ product;

if( in_array( $product->get_id(), not_purchasable_ids() )) {

return false;

}

retourneer $is_purchasable;

}

functie not_purchasable_ids() {

return-array (624,625);

}

De knop Toevoegen aan winkelwagen is uitgeschakeld voor de producten met ID's 624 en 625 in dit voorbeeldscript. Overweeg om die ID's te vervangen door uw WooCommerce-product-ID's om deze aan te passen aan uw winkel. Zoals u kunt zien, kunt u onbeperkte producten toestaan ​​door simpelweg een komma te gebruiken om de ID's te scheiden.

Ga naar je WordPress-dashboard > WooCommerce > Producten en beweeg je muis over een product in de lijst om de ID te zien.

5. Schakel de knop Toevoegen aan winkelwagentje voor slechts enkele categorieën uit

U kunt de knop Toevoegen aan winkelwagentje ook uitschakelen voor bepaalde categorieën. Als u bijvoorbeeld de knop uit de categorie "Laptops" wilt verbergen, kunt u de volgende code gebruiken:

add_action('wp', 'QL_remove_add_to_cart_from_category');   

functie QL_remove_add_to_cart_from_category(){ 

  if( is_product_category( 'laptops') ) { 

    remove_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart'); 

  } 

}

Kopieer deze code en vervang "laptops" in regel 3 door de titel van de categorie waar de knop Toevoegen aan winkelwagentje verborgen moet zijn.

6. Verwijder de knop tijdelijk en deze zal na een datum weer verschijnen

Laten we de zaken naar een ander niveau tillen en een deel van wat we hebben gelezen samenvoegen. Stel dat u op het punt staat een product te lanceren en dat u al een productpagina met al zijn functies hebt gemaakt. Als u die pagina wilt gebruiken om uw klanten op de hoogte te stellen van de lancering en om het product te promoten voordat het live gaat, kunt u de knop Toevoegen aan winkelwagentje verbergen tot de officiële lancering en deze vervolgens automatisch laten verschijnen op de lanceringsdag.

Stel dat u van plan bent uw product op 15 december 2020 te introduceren, en u wilt de knop Toevoegen aan winkelwagentje tot die tijd verbergen en vervolgens op 15 december opnieuw onthullen. Om dit te doen, kopieer en plak je het onderstaande script:

add_filter( 'woocommerce_is_purchasable', 'hide_add_to_cart_button_until_date', 10, 2 );

functie hide_add_to_cart_button_until_date ($is_purchasable = true, $product) {

$current_date = date('Jm-d');

$release_date = date('Ym-d', strtotime('2020-12-15') );

if(strtotime($current_date) <strtotime($release_date) && $product->get_id() == 624) {

$is_purchasable = onwaar;

}

retourneer $is_purchasable;

}

De knop Toevoegen aan winkelwagen wordt vervangen door een knop Lees meer waarmee gebruikers tot de lanceringsdatum naar de productpagina gaan. Laten we eens nader bekijken hoe het script nu werkt. De code vergelijkt de huidige datum met de lanceringsdatum en als de huidige datum eerder is, is het product niet beschikbaar voor aankoop.

Het product zal beschikbaar zijn voor aankoop wanneer de huidige datum gelijk is aan of hoger is dan de lanceringsdatum, en de knop Toevoegen aan winkelwagentje zal automatisch verschijnen. Vergeet niet de datum en de product-ID te vermelden (624 in ons voorbeeld).

Je hebt in deze handleiding verschillende methoden geleerd om de knop Toevoegen aan winkelwagentje te verwijderen. We hebben gezien hoe je het in de hele winkel kunt verbergen, voor specifieke producten, gebruikers en gebruikersrollen, en zelfs hoe je het voor een bepaalde dag kunt verbergen en het dan automatisch weer kunt laten zien. Dit geeft je wat meer speelruimte als het gaat om het aanpassen van je winkel voor verschillende scenario's.

Gebruik deze scripts gewoon als uitgangspunt en pas ze aan om aan de behoeften van uw winkel te voldoen.

 

Over de auteur
Daniel Luke
Daniel is een webdesigner en ontwikkelaar. Hij is de afgelopen 10 jaar een ontwikkelaar geweest die met verschillende WordPress-thema's heeft gewerkt, waardoor hij verschillende thema's kan vergelijken en contrasteren, de sterke en zwakke punten kan begrijpen om feitelijke, praktijkgerichte beoordelingen te ontwikkelen. Hij is ook ontwikkelaar van mobiele apps en technologierecensent. Gedurende een aantal jaren heeft hij zijn eigen mobiele apps ontwikkeld, zowel op Android als iPhone. Dankzij deze praktijkgerichte specialisatie in mobiele en webontwikkeling kan hij een gezaghebbende stem zijn als het gaat om technologierapportage.

Nog een ding... Wist je dat mensen die nuttige dingen zoals dit bericht delen er ook GEWELDIG uitzien? ​
Alstublieft laat een nuttig geef commentaar met je mening, deel dit dan op je Facebook-groep (en) die dit nuttig zouden vinden en laten we samen de vruchten plukken. Bedankt voor het delen en aardig zijn!

Disclosure: Deze pagina kan links bevatten naar externe sites voor producten die we geweldig vinden en die we van harte aanbevelen. Als u producten koopt die we aanbevelen, kunnen we een verwijzingsvergoeding verdienen. Dergelijke vergoedingen hebben geen invloed op onze aanbevelingen en we accepteren geen betalingen voor positieve beoordelingen.

Auteur (s) Uitgelicht op:  Inc Magazine-logo   Sitepoint-logo   CSS Tricks-logo    webdesignerdepot-logo   WPMU DEV-logo   en nog veel meer ...