יש כמה סוגיות מרכזיות שאנחנו נתקלים בהם פעם אחר פעם בחנויות, עם התוסף WooCommerce, להלן התיקונים המתאימים:
ניקיון סטנדרטי – הסתרת הכפתורים המרחפים, ריכוך אפקט ה-זום, הסרת המסגרת, והסתרת הפילטר הכהה במעבר עכבר
.woocommerce.if-overlay .image_frame .image_wrapper .image_links { display:none; } .woocommerce.if-overlay .image_frame:hover .image_wrapper img, .woocommerce.if-overlay .image_frame.hover .image_wrapper img { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); } .woocommerce .products_wrapper .image_frame { border:0px; } .woocommerce.if-overlay .image_frame .image_wrapper .mask:after { background:transparent !important; }
הוספת מרווח עליון לדפי החנות:
.woocommerce-page #Content { padding-top:50px !important; }
סידור סליידר התמונות – התמונות לא מוצגות באופן תקין בדף המוצר:
.woocommerce .product .product_wrapper .product_image_wrapper .images { direction:rtl; }
נירמול גודל התמונות – בכל הגזרות, התאמת התמונות לגודל המבוקש ע"י הלקוח
/*התאמות לגודל תמונה אחיד*/ .image_frame .image_wrapper { height:300px; display:flex; } .image_frame .image_wrapper a { height:300px; display:flex; align-items:center; justify-content:center; margin:0 auto; }
הסתרת המחירים – הסתרת מחירי המוצרים
.products_wrapper ul.products li.product .price { display:none; } p.price { display:none; } .desc .price { display:none !important; }
החלפת צבע Overlay – שקופית MASK כאשר עוברים עם הסמן על המוצרים
.if-overlay .image_frame .image_wrapper .mask:after { background-color:rgba(0,124,195,0.15) !important; }
שינוי צבע עיגול זכוכית מגדלת – כדי להבליט את ההגדלה של התמונה
.woocommerce div.product div.images .woocommerce-product-gallery__trigger { background-color: #007CC3; } .woocommerce div.product div.images .woocommerce-product-gallery__trigger:before { border-color:#fff; } .woocommerce div.product div.images .woocommerce-product-gallery__trigger:after { background-color:#fff; }
הסתרת המחיר / טווח המחירים
single-product .summary p.price { display:none; }
החלפת הצדדים בין התמונה לבין התיאור של המוצר (ברזולוציות שהן לא סלולריות)
.woocommerce #content div.product div.summary { float:right; } .woocommerce .product .product_wrapper .product_image_wrapper { float:left; }
הוספת מבצע משלוחים ב-Action bar, יש להוסיף את הקוד הבא תחת Slogan:
מבצע מיוחד! <i class="icon-truck-line faw"></i> משלוח <strong>חינם</strong> מעל 199 ש"ח
מירכוז
כדי למרכז את כותרות הקטגוריות, כותרות המוצרים, והגדלת הגודל של המחיר:
.woocommerce ul.products li.product .woocommerce-loop-category__title { text-align:center; } .woocommerce ul.products li.product h3, .woocommerce-page ul.products li.product h4 { text-align:center; } .woocommerce ul.products li.product .price > span { display:block; text-align:center; } .woocommerce ul.products li.product .price > span { font-size:30px; }