Podmiana buttona
-
Witam, posiadam własny kod CSS buttona i chciałbym podmienić ten istniejący „Dodaj do koszyka” na stronie http://torbiczuk.stronazen.pl/index.php/produkt/ramka-profil-2/. Bardzo proszę o pomoc gdzie mam zmodyfikować kod?
-
spróbuj dodać ten własny kod CSS buttona na końcu style.css, ale podmień w nim klasy buttona na .single_add_to_cart_button, nowe style powinny nadpisać stare. 🙂
Dzięki bardzo za odpowiedź!
Dodałem ale nie działa, może robię coś źle.
Możesz powiedzieć jak dokładnie podmienić klasy?
Gdzie dodać .single_add_to_cart_button i czy na pewną tą frazę.
Po kodzie widzę, że button „dodaj do koszyka” ma po prostu .buttonOto kod nowego buttona:
.single_add_to_cart_button {
display: inline-block;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
cursor: pointer;
padding: 13px 10px;
border: 0 solid rgba(19,37,43,1);
border-top: 1px solid rgba(173,173,173,1);
-webkit-border-radius: 14px;
border-radius: 14px;
font: normal 16px/normal Georgia, serif;
color: rgba(255,255,255,0.9);
-o-text-overflow: clip;
text-overflow: clip;
background: url(„http://torbiczuk.stronazen.pl/wp-content/uploads/2015/07/dodaj_koszyk2.png”);
background-position: 50% 50%;
-webkit-background-origin: padding-box;
background-origin: padding-box;
-webkit-background-clip: border-box;
background-clip: border-box;
-webkit-background-size: auto auto;
background-size: auto auto;
-webkit-box-shadow: 2px 2px 2px 0 rgba(0,0,0,0.54) ;
box-shadow: 2px 2px 2px 0 rgba(0,0,0,0.54) ;
text-shadow: -1px -1px 1px rgba(106,107,109,0.73) ;
-webkit-transition: all 300ms cubic-bezier(0.25, 0.25, 0.75, 0.75);
-moz-transition: all 300ms cubic-bezier(0.25, 0.25, 0.75, 0.75);
-o-transition: all 300ms cubic-bezier(0.25, 0.25, 0.75, 0.75);
transition: all 300ms cubic-bezier(0.25, 0.25, 0.75, 0.75);
}.enjoy-css:hover {
border: 1px solid rgba(102,102,102,1);
background-position: 50% 50%;
-webkit-background-origin: padding-box;
background-origin: padding-box;
-webkit-background-clip: border-box;
background-clip: border-box;
-webkit-background-size: auto auto;
background-size: auto auto;
-webkit-transition: all 5ms cubic-bezier(0.42, 0, 0.58, 1);
-moz-transition: all 5ms cubic-bezier(0.42, 0, 0.58, 1);
-o-transition: all 5ms cubic-bezier(0.42, 0, 0.58, 1);
transition: all 5ms cubic-bezier(0.42, 0, 0.58, 1);
}.enjoy-css:active {
border: 0 solid rgba(19,37,43,1);
border-top: 1px solid rgba(173,173,173,1);
background-position: 50% 50%;
-webkit-background-origin: padding-box;
background-origin: padding-box;
-webkit-background-clip: border-box;
background-clip: border-box;
-webkit-background-size: auto auto;
background-size: auto auto;
-webkit-transition: none;
-moz-transition: none;
-o-transition: none;
transition: none;
}Tak, przycisk ma również klasę button – prawda. Jednak jeżeli podepniesz ten nowy CSS pod tą klasę, to w efekcie zmienisz również te małe buttony na stronie głównej i niektóre inputy, bo one też mają klasę button, a skoro chciałeś zmienić przyciski z napisem „Dodaj do koszyka”, to uznałem że klasa, którą zaproponowałem we wcześniejszym poście będzie lepsza do tego, bo odnosi się tylko do przycisków na pojedynczej stronie produktu.
Pozamieniaj wszystkie wystąpienia starej nazwy klasy na nową w swoim CSSie.
Ponieważ CSS woocommerce wczytywany jest w motywie później niż twój plik ze stylami toteż dalej widoczne są domyślne style. Najlepszym, i najprostszym rozwiązaniem według mnie będzie bardziej specyficzne odniesienie się do elementu, wtedy nowe style powinny zadziałać.
Jeżeli Twój motyw ma opcję dodania custom CSS użyj jej, jak nie ma to
wklej całość na końcu pliku style.css, albo użyj wtyczki do tego np. simple custom css.Spróbuj tak:
body .product button.single_add_to_cart_button { display: inline-block; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; cursor: pointer; padding: 13px 10px; border: 0 solid rgba(19,37,43,1); border-top: 1px solid rgba(173,173,173,1); -webkit-border-radius: 14px; border-radius: 14px; font: normal 16px/normal Georgia, serif; color: rgba(255,255,255,0.9); -o-text-overflow: clip; text-overflow: clip; background: url("http://torbiczuk.stronazen.pl/wp-content/uploads/2015/07/dodaj_koszyk2.png"); background-position: 50% 50%; -webkit-background-origin: padding-box; background-origin: padding-box; -webkit-background-clip: border-box; background-clip: border-box; -webkit-background-size: auto auto; background-size: auto auto; -webkit-box-shadow: 2px 2px 2px 0 rgba(0,0,0,0.54) ; box-shadow: 2px 2px 2px 0 rgba(0,0,0,0.54) ; text-shadow: -1px -1px 1px rgba(106,107,109,0.73) ; -webkit-transition: all 300ms cubic-bezier(0.25, 0.25, 0.75, 0.75); -moz-transition: all 300ms cubic-bezier(0.25, 0.25, 0.75, 0.75); -o-transition: all 300ms cubic-bezier(0.25, 0.25, 0.75, 0.75); transition: all 300ms cubic-bezier(0.25, 0.25, 0.75, 0.75); } body .product button.single_add_to_cart_button { border: 1px solid rgba(102,102,102,1); background-position: 50% 50%; -webkit-background-origin: padding-box; background-origin: padding-box; -webkit-background-clip: border-box; background-clip: border-box; -webkit-background-size: auto auto; background-size: auto auto; -webkit-transition: all 5ms cubic-bezier(0.42, 0, 0.58, 1); -moz-transition: all 5ms cubic-bezier(0.42, 0, 0.58, 1); -o-transition: all 5ms cubic-bezier(0.42, 0, 0.58, 1); transition: all 5ms cubic-bezier(0.42, 0, 0.58, 1); } body .product button.single_add_to_cart_button { border: 0 solid rgba(19,37,43,1); border-top: 1px solid rgba(173,173,173,1); background-position: 50% 50%; -webkit-background-origin: padding-box; background-origin: padding-box; -webkit-background-clip: border-box; background-clip: border-box; -webkit-background-size: auto auto; background-size: auto auto; -webkit-transition: none; -moz-transition: none; -o-transition: none; transition: none; }
Albo inny sposób to wyłączenie styli woocommerce w kokpicie i skopiowanie ich do style.css i wtedy edytować.
http://docs.woothemes.com/document/disable-the-default-stylesheet/
ziemekpr0 dziękuję Ci bardzo, działa!
Od razu proszę Cię o zajrzenie do tematu – https://pl.forums.wordpress.org/topic/product-add-ons-nie-poddaje-sie-tlumaczeniu?replies=1
- Temat ‘Podmiana buttona’ jest zamknięty na nowe odpowiedzi.