مرتب کردن محصولات، باکس گذاشتن و تنظیم اندازه فونت در ووکامرس

amin.yarmohammadi

تازه وارد
سلام

من میخوام محصولاتم در سایت    منظم و چشم نواز باشه.

You must be registered for see images attach


مثلا یک سایتی دیدم خیلی منظم بود:

You must be registered for see images attach


چطور میتونم اینجوری بکنم؟ هم باکس دور محصولات، هم فونت و اندازه فونت (فقط برای ووکامرس نه بلاگ) و هم مرتب شدن محصولات.

 

Mohammad

مدیر انجمن
پرسنل مدیریت
این مربوط به قالب شماست و باید چند ساعتی وقت بگذارید CSS رو ویرایش کنید.

 

دارکوب کالا

تازه وارد
سلام . این کد ها رو داخل style.css قرار بدین

ul.products li{
padding:0 30px !important;
}

ul.products li h2{
font-weight: 400;
text-overflow: ellipsis;
overflow: hidden;
text-align: justify;
white-space: nowrap;
margin: 10px 0;
font-size: 16px !important;
}

ul.products li .woocommerce-page .product .price{
font-size:16px !important;
}

ul.products li .price ins span{
color: #348c4f !important;
text-decoration:none;
}

ul.products li .price del span{
font-size:12px !important;
}


ظاهر سایت رو بهبود میده 

با تشکر

 

amin.yarmohammadi

تازه وارد
سلام . این کد ها رو داخل style.css قرار بدین

ul.products li{
padding:0 30px !important;
}

ul.products li h2{
font-weight: 400;
text-overflow: ellipsis;
overflow: hidden;
text-align: justify;
white-space: nowrap;
margin: 10px 0;
font-size: 16px !important;
}

ul.products li .woocommerce-page .product .price{
font-size:16px !important;
}

ul.products li .price ins span{
color: #348c4f !important;
text-decoration:none;
}

ul.products li .price del span{
font-size:12px !important;
}


ظاهر سایت رو بهبود میده 

با تشکر
خیلی ممنون.

دقیقا کدوم خط قرار بدم؟

 

amin.yarmohammadi

تازه وارد
سلام . این کد ها رو داخل style.css قرار بدین

ul.products li{
padding:0 30px !important;
}

ul.products li h2{
font-weight: 400;
text-overflow: ellipsis;
overflow: hidden;
text-align: justify;
white-space: nowrap;
margin: 10px 0;
font-size: 16px !important;
}

ul.products li .woocommerce-page .product .price{
font-size:16px !important;
}

ul.products li .price ins span{
color: #348c4f !important;
text-decoration:none;
}

ul.products li .price del span{
font-size:12px !important;
}


ظاهر سایت رو بهبود میده 

با تشکر
با تشکر

انجام دادم و عالی شد. فقط یه مشکلی پیش اومد که اسم محصول رو توی یک خط مینویسه که اکثرا جا نمیشه.

You must be registered for see images attach


هر چقدر text-overflow و  overflow  رو تغییر دادم نشد. چطور میشه مثل این سایت توی ۲ یا ۳ خط بنویسه؟

You must be registered for see images attach


 

دارکوب کالا

تازه وارد
با تشکر

انجام دادم و عالی شد. فقط یه مشکلی پیش اومد که اسم محصول رو توی یک خط مینویسه که اکثرا جا نمیشه.



هر چقدر text-overflow و  overflow  رو تغییر دادم نشد. چطور میشه مثل این سایت توی ۲ یا ۳ خط بنویسه؟

سلام . این خط هارو از کد قبلی که دادم پاک کنید

کد:
[COLOR=rgb(0,0,0)] text[/COLOR][COLOR=rgb(102,102,0)]-[/COLOR][COLOR=rgb(0,0,0)]overflow[/COLOR][COLOR=rgb(102,102,0)]:[/COLOR][COLOR=rgb(0,0,0)] ellipsis[/COLOR][COLOR=rgb(102,102,0)];[/COLOR][COLOR=rgb(0,0,0)]
    overflow[/COLOR][COLOR=rgb(102,102,0)]:[/COLOR][COLOR=rgb(0,0,0)] hidden[/COLOR][COLOR=rgb(102,102,0)];[/COLOR][COLOR=rgb(0,0,0)]
    text[/COLOR][COLOR=rgb(102,102,0)]-[/COLOR][COLOR=rgb(0,0,0)]align[/COLOR][COLOR=rgb(102,102,0)]:[/COLOR][COLOR=rgb(0,0,0)] justify[/COLOR][COLOR=rgb(102,102,0)];[/COLOR][COLOR=rgb(0,0,0)]
    white[/COLOR][COLOR=rgb(102,102,0)]-[/COLOR][COLOR=rgb(0,0,0)]space[/COLOR][COLOR=rgb(102,102,0)]:[/COLOR][COLOR=rgb(0,0,0)] nowrap[/COLOR][COLOR=rgb(102,102,0)];[/COLOR]
 

.امیر

کاربر عضو
سلام جهت زیباسازی بیشتر این کد هارو هم در style.css قرار بدید

ul.products li .mom_product_thumbnail {
border: 1px solid #c7c7c7 !important;
border-radius: 15px !important;
padding: 10px !important;
position: relative;
}
ul.products li h2 {
border-radius: 15px !important;
padding: 5px 15px 5px 10px !important;
border: 1px solid #c1c0c0;
line-height: 1.9em !important;
}
.woocommerce-page .product .price {
font-family: byekan,iran-sans !important;
}


خروجی نهایی :

You must be registered for see images attach


 

amin.yarmohammadi

تازه وارد
سلام جهت زیباسازی بیشتر این کد هارو هم در style.css قرار بدید

ul.products li .mom_product_thumbnail {
border: 1px solid #c7c7c7 !important;
border-radius: 15px !important;
padding: 10px !important;
position: relative;
}
ul.products li h2 {
border-radius: 15px !important;
padding: 5px 15px 5px 10px !important;
border: 1px solid #c1c0c0;
line-height: 1.9em !important;
}
.woocommerce-page .product .price {
font-family: byekan,iran-sans !important;
}


خروجی نهایی :

You must be registered for see images attach
بله، واقعا عالی شد مهندس جان.

خیلی ممنونم  :53: :53:

 
بالا