Gå till innehållet

Hur man anpassar WooCommerce-knappen "Lägg i kundvagn"

Divi: det enklaste WordPress-temat att använda

Divi: Det bästa WordPress-temat hela tiden!

mer 901.000-nedladdningar, Divi är det mest populära WordPress-temat i världen. Den är komplett, lätt att använda och levereras med mer än 62 gratis mallar. [Rekommenderas]

För att ändra färgen på WooCommerce-knapparna måste vi ändra eller ersätta standard style.css-fil med knappar. För att göra detta måste vi lägga till en anpassad CSS-kod till vår barnets WordPress-tema.

Det finns två sätt att göra detta:

  • Lägg till en anpassad CSS i filtypen style.css för barntema
  • Använd några plugins för att injicera anpassad CSS-kod på dina webbsidor.

Steg 1: Installera plugin på Wordpress Enkel anpassade CSS och aktivera den

Vi ska använda ett WordPress-plugin för att injicera CSS-kod i sidorna i a WooCommerce Online Shop. Du kan ladda ner plugin: Enkel Anpassad CSS

Du kan läsa vår handledning på installation och aktivering av WordPress-plugin.

Efter att plugin har aktiverats kommer en ny undermeny att läggas till i menyn Apparence :

Anpassad CSS Menu Wordpress plugin

Åtkomst till detta avsnitt tar dig till ett gränssnitt med en textruta där du kan ange anpassad CSS-kod.

Gränssnittswordpress plugin Simple anpassad CSS

Lägg följande CSS i textrutan och klicka sedan på " Uppdatera anpassat CSS".

.woocommerce #content input.button.alt: hover, .woocommerce #respond ingångs # submit.alt: hover, .woocommerce a.button.alt: hover, .woocommerce button.button.alt: hover, .woocommerce input.button. alt: hover, .woocommerce-sida #content input.button.alt: hover, .woocommerce-input #respond # submit.alt: hover, .woocommerce-sida a.button.alt: hover, .woocommerce-sida-knappen. button.alt: hover, .woocommerce-sida input.button.alt: hover {background: röd betydande; bakgrundsfärg: röd viktig; Färg: Vit viktigt; text-shadow: transparent viktigt; box-shadow: none; border-färg: #ca0606 viktigt; } .woocommerce #content Input.button: hover, .woocommerce #respond ingångs # skicka: hover, .woocommerce a.button: hover, .woocommerce button.button: hover, .woocommerce input.button: hover, .woocommerce-sida # lycklig input.button: hover, .woocommerce-input #respond # skicka: hover, .woocommerce-sida a.button: hover, .woocommerce-sida button.button: hover, .woocommerce-sida input.button: hover {background : röd viktig; bakgrundsfärg: röd viktig; Färg: Vit viktigt; text-shadow: transparent viktigt; box-shadow: none; border-färg: #ca0606 viktigt; } .woocommerce #content Input.button, .woocommerce #respond ingångs # lämna, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce-sida #content input.button, .woocommerce-sida # # skicka ingång svarar .woocommerce-sida a.button, .woocommerce-sida button.button, .woocommerce-sida input.button {background: röd betydande; Färg: Vit viktigt; text-shadow: transparent viktigt; border-färg: #ca0606 viktigt; } .woocommerce #content Input.button.alt: hover, .woocommerce #respond ingångs # submit.alt: hover, .woocommerce a.button.alt: hover, .woocommerce button.button.alt: hover, .woocommerce input.button .alt: hover, .woocommerce-sida #content input.button.alt: hover, .woocommerce-input #respond # submit.alt: hover, .woocommerce-sida a.button.alt: hover, .woocommerce-sida knappen .button.alt: hover, .woocommerce-sida input.button.alt: hover {background: röd betydande; box-shadow: none; text-shadow: transparent viktigt; Färg: Vit viktigt; border-färg: #ca0606 viktigt; }

Du kan nu komma åt din onlinebutik, du kommer att märka att knapparna faktiskt har ändrat färger.

Skapa enkelt din webbplats med Elementor

Med Elementor kan du enkelt skapa en webbdesign med ett professionellt utseende. Sluta betala dyra för vad du kan göra själv. [Fritt]

För att anpassa färgen på knapparna så att du äntligen får det utseende du vill ha,

Ersätt egendom " backgroud: red viktigt! Av en valfri färg. Uppdatera koder och få tillgång till din webbutik igen. Med hjälp av den stil vi just har gett dig kan du faktiskt ändra knapparnas struktur.

Med lite forskning kan du skapa unika knappar med en stil som matchar ditt WordPress-tema (speciellt om den senare inte är kompatibel med WooCommerce).

lägg i varukorg knappen Wordpress

För följande exempel kan du använda följande CSS-kod.

.woocommerce #content input.button, .woocommerce #respond ingångs # in, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce sidan #content input.button, .woocommerce-sida #respond # in input, .woocommerce sidan a.button, .woocommerce sidan button.button, .woocommerce sidan input.button {background-color: #6fba26; padding: 10px; positioner: relativ; font-family: 'Open Sans', sans-serif; font-size: 12px; text-decoration: none; färg: #fff; background-image: linjär-gradient (botten, rgb (100,170,30) 0% rgb (129,212,51) 100%); box-shadow: infälld 0px 1px 0px #7F8EF1, 0px 6px 0px #0D496F; border-radius: 5px; } .woocommerce #content input.button.alt: hover, .woocommerce #respond input # submit.alt: hover, .woocommerce a.button.alt: hover, .woocommerce button.button.alt: hover, .woocommerce input.button .alt: hover, .woocommerce-sida #content input.button.alt: hover, .woocommerce-input #respond # submit.alt: hover, .woocommerce-sida a.button.alt: hover, .woocommerce-sida knappen .button.alt: hover, .woocommerce-sida input.button.alt: hover {top: 7px; background-image: linjär-gradient (botten, rgb (100,170,30) 100% rgb (129,212,51) 0%); box-shadow: infälld 0px 1px 0px #0D496F, inlägg 0px -1px 0px #0D496F; färg: #156785; text-shadow: 0px 1px 1px RGBA (255,255,255,0.3); bakgrund: rgb (44,160,202); }

För dig som vill optimera prestandan i deras onlinebutik oavsett vad gäller konvertering eller försäljning av produkter,

Vi erbjuder också 3 premium WordPress-plugins designade för denna uppgift.

1. WooCommerce återställa övergiven kundvagn

dina kunder fyller ofta sina korgar och lämnar dem: tack till WooCommerce Återgivet i kundvagn du kommer att kunna kontakta dem, påminna dem om vad de har köpt och bjuda in dem att slutföra sina handlingar.

Återställ övergiven vagn för woocommerce

Letar du efter de bästa WordPress-teman och plugins?

Ladda ner de bästa plugins och WordPress-teman på Envato och enkelt skapa din webbplats. Redan mer än 49.720.000-nedladdningar. [EXKLUSIV]

Ställ in tidsintervallet mellan när en vagn överges och när en personlig påminnelse skickas till din kund med en direktlänk till inköpssidan så att de kan se vad de var på poäng att köpa.

Ladda ner | demo | webbhotell

2.WooCommerce Dölj pris & Lägg i varukorg Knapp Plugin

Plugin-programmet WooCommerce Hide Prices tillåter köpmän att skapa flera regler för att dölja priser eller dölja knappen "lägg till i kundvagn" från icke-inloggade kunder eller användare som har vissa behörigheter till din e-handelswebbplats.

Woocommerce dölj pris lägg till i kundvagn knappen plugin dölja efter användarroller

Du kan dölja priset och knappen "Lägg i kundvagn" på vissa produkter eller i specifika kategorier. Du kan ersätta dem med personlig text eller med en knapp som tar dem till kontaktformuläret. Du kan skapa så många regler som automatiskt döljer priset och knappen " Lägg till i panikr ”beroende på vad du vill ha.

Ladda ner | demo | webbhotell

3. WooCommerce Valuta Switcher

Detta plugin låter dig växla produktpriser från en valuta till en annan i realtid.Woocommerce valutaomkopplare

Detta är särskilt viktigt inom e-handel eftersom det riktar sig till hela världen. Detta plugin säkerställer att oavsett var dina kunder finns, kommer de alltid att kunna beställa från din onlinebutik.

Ladda ner | demo | webbhotell

Rekommenderade resurser

Upptäck andra rekommenderade resurser som hjälper dig optimera prestandan i din onlinebutik. 

Skapa enkelt din webbutik

Ladda ner gratis WooCommerce, de bästa e-handelspluggarna för att sälja dina fysiska och digitala produkter på WordPress. [Rekommenderas]

Slutsats

Här är ! Det här är allt för den här handledningen tillägnad knappanpassning Lägg i varukorgen från WooCommerce. Tveka inte att dela den med dina vänner på din sociala nätverk föredragna. 

Du kommer dock också att kunna konsultera vår medel, om du behöver fler element för att genomföra dina projekt för att skapa webbplatser, genom att konsultera vår guide om WordPress blogg skapande.

Men under tiden berätta om din commentaires och förslag i det dedikerade avsnittet.

Den här artikeln innehåller kommentarer 8

Lämna en kommentar

Din e-postadress kommer inte att publiceras. Obligatoriska fält är markerade *

Den här webbplatsen använder Akismet för att minska oönskade. Läs mer om hur dina kommentarer data används.

Tillbaka till toppen
3 aktier
del3
tweet
Enregistrer