התאמות נפוצות לחנות - WooCommerce

יש כמה סוגיות מרכזיות שאנחנו נתקלים בהם פעם אחר פעם בחנויות, עם התוסף 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;
}

התאמות נפוצות לחנות – WooCommerce