Woocommerce-laajennus mukautettu tuoteostoskori-painike

Kuvaus

Pluggin woocommerce mukautettu tuoteostoskori-nappi

1. Yleinen tavoite

Sallii WooCommercen kahden keskeisen napin graafisen ja toiminnallisen mukauttamisen tuotetiedoissa:

1. Nappi “Lisää ostoskoriin”

2. Nappi “Näytä ostoskori” (lisätty “Lisää ostoskoriin” -napin oikealle puolelle)

Kaikki asetukset ovat saatavilla suoraan WordPressin Mukauttajasta, ilman että tarvitsee koskea teeman koodiin.

2. “Lisää ostoskoriin” -napin mukauttaminen

Tämä toiminto, joka on integroitu jokaisen tuotteen sivun yläpään, injektoi CSS:n inline mukauttaakseen ulkoasua välittömästi:

• Nappiteksti
  – Muuta oletusnimiteksti “Lisää ostoskoriin”

• Värit
  – Taustaväri
  – Tekstin väri

• Reunat
  – Tyyli (none, solid, dotted, dashed)
  – Paksuus (px)
  – Väri

• Pyöristetyt kulmat
  – Jokaisen kulman säde (ylävasen, yläoikea, alaoikea, alavasen)

• Varjo
  – X / Y siirto (px)
  – Sumeus (px)
  – Varjon väri

• CSS-animaatiot (valinta Mukauttajasta)
  – shake : kevyt vaakasuora värähtely
  – zoom : suurennus/pulssiefekti
  – cartoon : taustavärin syklinen vaihto
  – random : satunnainen valinta edellä mainituista kolmesta

Kaikki nämä tyylit sovelletaan yhdellä <style> injektoidulla wp_head:iin, mikä takaa minimaalisen vaikutuksen suorituskykyyn.

3. “Näytä ostoskori” -napin lisääminen

Asetettu heti “Lisää ostoskoriin” -napin jälkeen woocommerce_after_add_to_cart_button -koukun ansiosta, tämä toinen nappi:

• Siirtää ostoskori-sivulle (wc_get_cart_url())

• Teksti muokattavissa (oletuksena “Näytä ostoskori”)

• Värit
  – Tausta
  – Teksti

• Reuna
  – Tyyli, paksuus, väri

• Pyöristetyt kulmat (yksittäiset)

• Heittovarjo (X/Y offset, sumeus, väri)

• Vasen marginaali esiasetettu pääpainiketta varten

4. Mukautusliittymän asetukset (Customizer)

Yksi osio “WC-nappien mukautus” kokoaa kaikki asetukset:

1. ”Lisää ostoskoriin” asetukset

2. ”Näytä ostoskori” asetukset

Jokaiselle ryhmälle:

• add_setting() + add_control() (teksti, väri, valinta, numero)

• Vahvistus sanitize_text_field, sanitize_hex_color, absint kautta

5. Yhteensopivuus ja hyviä käytäntöjä

• Vaadittu vähimmäisversio : WooCommerce 3.0+

• Teemat : yhteensopiva useimpien teemojen kanssa (Storefront, Astra, OceanWP, …)

• Suorituskyky :

  • Kevyt PHP-koodi, ei ulkoisia riippuvuuksia

  • CSS inline rajoitettu vain tuotesivuille

• Ylläpito :

  • Nykyinen versio : 1.5

  • Käännettävissä tekstidomaineilla killerdev98-wc-custom-button

6. Tyypilliset käyttötapaukset

• Vahva brändäys : sovita napin värit liikkeesi visuaalisiin elementteihin.

• Toimintakehotteen vaikutus : lisää ”shake”-animaatio korostaaksesi nappia.

• Nopea käyttäjäpolku : tarjoa heti tuotesivulta suora pääsy ostoskoriin.

• Graafinen yhtenäisyys : määritä kaikille napeille johdonmukainen muoto ja varjo.

Tämä lisäosa tarjoaa näin täysin hallinnan, vaivattomasti, WooCommerce-tuotekatalogisi pääpainikkeiden ulkoasusta ja käyttäytymisestä.

Woocommerce-laajennus mukautettu tuoteostoskori-painike decostickerstore