Project starten

De plugin WooCommerce Quick View instellen

Instellingenmenu

Om de plugin in te stellen, zou je het menu Quick View onder het menu WooCommerce moeten zien. Zie je het niet, controleer dan of de plugin Redux Framework is geïnstalleerd en geactiveerd.

Algemene instellingen

In de algemene instellingen schakel je eerst de plugin in. Daarna bepaal je de positie van de Quick View-knop en de hookprioriteit. Zie je de knoppen niet, probeer dan andere waarden voor deze 2 instellingen.

Daarna stel je een tekst voor de Quick View-knop in (HTML is hier toegestaan, dus je kunt bijvoorbeeld een eigen icoon gebruiken).

Vink je “Use Default Template” aan, dan gebruikt onze plugin niet de eigen modalweergave, maar die van WooCommerce. Probeer gerust of dat werkt, maar sommige thema’s hebben die overschreven. Wil je de lay-out aanpassen, kopieer dan het Quick View-bestand uit wp-content/woocommerce-quick-view/public/templates/quick-view.php naar je thema (wp-content/themes/your-child-theme/woocommerce/quick-view-php).

general quick view settings
algemene instellingen van Quick View

Styling van Quick View

In het stijlonderdeel van de plugininstellingen stel je eerst een standaard openingseffect in (als modal of inline direct op je categoriepagina’s).

Met de volgende instellingen style je de modal en de achtergrond ervan. Je wijzigt kleuren, padding en de breedte van de afbeeldings- of inhoudscontainer. Ook kun je “Content Auto Height” inschakelen: de inhoud krijgt dan dezelfde hoogte als je afbeelding. Is de inhoud langer, dan verschijnt een schuifbalk.

Werken de stijlen niet, controleer dan of het volgende bestand CHMOD 0777 heeft: /wp-content/woocommerce-quick-view/public/css/woocommerce-quick-view-custom.css

quick view styling options
stijlopties van Quick View

Te tonen gegevens

In het onderdeel met te tonen gegevens schakel je bepaalde delen van de Quick View-inhoud in en uit. Deze elementen zijn mogelijk:

  • Afbeelding
  • Galerij
  • Titel
  • Reviews
  • Prijs
  • SKU
  • Tags
  • Categorieën
  • Korte beschrijving
  • In winkelwagen
  • Beschrijving
  • Attributen
  • Lees meer
data to show in quick view
te tonen gegevens in Quick View

Quick View-pop-up

Om de speciale Quick View-pop-up te tonen (zie de demo rechtsonder), schakel je die in bij de pop-upopties.

quick view popup configuration
configuratie van de Quick View-pop-up

Geavanceerde opties

In het paneel met geavanceerde instellingen kun je desgewenst eigen CSS of JS toevoegen.