تغییر استایل بخش های پیشفرض قالب وردپرس
سلام وقتتون بخیر. من سایت فروشگاهی طراحی میکنم و قالب hello elementor انتخاب کردم . مشکل من اینه که استایل بعضی از قسمت ها تو سایت رو نمیتونم تغییر بدم یعنی گزینه ای برای تغییرش وجود نداره و فکر میکنم استایل پیشفرض خود قالب هلو المنتور باشه . یه عکس هم پیوست کردم . ممنون میشم راهنماییم کنید چجوری تغییر بدم.
سلام
2 تا راه داری :
1 : با افزونه های المنتور مثل WooCommerce Page Builder For Elementor میتونی استایل سبد خرید و صفحه محصول و خلاصه هر چی مال ووکامرس هست و تغییر بدی .
این افزونه المان هایی مثل سبد خرید و حساب کاربری به المنتور اضافه میکنه پیشنهاد میکنم از این افزونه استفاده کنی و حتما قبلش آموزش استفادشو تو گوکل سرچ کن ببین .
2:اینکه برای تغییر استایل از کد css کنی من برای سایت خودم از کدد های css برای تغییر استایل فالب هلو المنتور استفاده میکنم . کد هارو اینجا برات میزارم اگه خواستی ازشون استفاده کنی نیاز به هیچ افزونه ای نداری فقط باید
بری به بخش سفارش سازی پوسته و در بخش کد های سفارشی css این کد هارو وارد کنی و تغییراتو منتشر کنی . به همین راحتی !!!
کد های استایل هلو المنتور ( دکمه های پیشفرض – بخش نظرات – سبد خرید – باکس های متن – جداول پیشفرض – پیام های ووکامرس )
#comments .children {
color: #28a655;;
list-style: none;
}
::selection {
background: #35495c;
color: #fff;
}
body, .site {
background: #fafbfc;
}
#add_payment_method table.cart img, .woocommerce-cart table.cart img, .woocommerce-checkout table.cart img {
width: 50px;
box-shadow: none;
box-shadow: -1px 12px 20px #6c40bc26;
border-radius: 4px;
}
table caption+thead tr:first-child td, table caption+thead tr:first-child th, table colgroup+thead tr:first-child td, table colgroup+thead tr:first-child th, table thead:first-child tr:first-child td, table thead:first-child tr:first-child th {
border-top: 0px solid #ccc;
color: white;
background-color: black;
}
order-top: 1px solid rgba(0, 0, 0, 0.05);
padding: 20px 20px 20px;
vertical-align: middle;
font-family: iran;
font-weight: 400;
}
textarea {
background: #f5f5f5;
width: 100%;
padding: 20px!important;
border: 1px solid #ddd;
font-family: IRANSans!important;
font-size: 16px!important;
height: 200px;
resize: vertical;
color: #35495c;
line-height: 32px;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 5px 7px rgba(28,76,156,.1);
}
#comments .comment-metadata, #comments .reply {
font-size: 14px;
background: #8658d94d;
width: 100px;
line-height : 180%;
text-align: center;
border-radius: 25px;
font-weight: 400;
padding: 10px;
color: #ffffff;
margin-top: 1px;
box-shadow: 0 5px 20px #8658d947;
}
.woocommerce-error, .woocommerce-info, .woocommerce-message {
padding: 1em 3.5em 1em 2em;
margin: 0 0 2em;
position: relative;
background-color: #f7f6f7;
background-color: #673ab7;
border-radius: 50px!important;
background-image: linear-gradient(135deg,#9667ea,#673ab7)!important;
color: #ffffff;
border-top: 0px solid #a46497;
list-style: none outside;
width: auto;
word-wrap: break-word;
box-shadow: 0 7px 20px #673ab755;
}
.woocommerce-message::before {
content: “\e015”;
color: #ffffff;
}
#add_payment_method table.cart td.actions .coupon .input-text, .woocommerce-cart table.cart td.actions .coupon .input-text, .woocommerce-checkout table.cart td.actions .coupon .input-text {
background-color: #fff;
border: 1px solid #ddd;
border-radius: 25px;
width: 200px;
padding: 6px 16px;
}
.woocommerce .quantity .qty {
background-color: #fff;
border: 1px solid #ddd;
border-radius: 25px;
box-shadow: 0 5px 7px rgba(28,76,156,.1);
width: 60px;
}
table td, table th {
padding: 15px;
line-height: 1.5;
vertical-align: top;
border: 0px solid #9b2727;
}
.woocommerce table.shop_table {
border: 1px solid #220c0c1a;
margin: 0 0 24px -1px;
text-align: right;
width: 100%;
border-collapse: separate;
border-radius: 8px;
box-shadow: 0 5px 7px #1c4c9c0f;
}
.woocommerce .cart-collaterals .cart_totals, .woocommerce-page .cart-collaterals .cart_totals {
float: left;
width: 48%;
border-radius: 15px;
box-shadow: 0 5px 19px 2px rgba(28, 76, 156, 0.05);
padding: 12px 20px;
}
.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea {
background-color: #fff;
border-radius: 25px;
box-shadow: 0 5px 7px rgba(28,76,156,.1);
border: 1px solid #ddd;
}
.woocommerce .woocommerce-ordering select {
vertical-align: top;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 25px;
box-shadow: 0 5px 7px rgba(28,76,156,.1);
}
.woocommerce #reviews #comments ol.commentlist li .comment-text {
margin: 0 50px 0 0;
border-radius: 10px;
padding: 1em 1em 0;
background-color: #fff;
box-shadow: 0 5px 7px rgba(28,76,156,.1);
border: 1px solid #ddd;
}
.yith_wcwl_wishlist_footer .yith_wcwl_wishlist_bulk_action #bulk_actions {
min-width: 250px;
vertical-align: top;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 25px;
box-shadow: 0 5px 7px rgba(28,76,156,.1);
}
.woocommerce #respond input#submit, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button {
background-color: #673ab7;
background-image: linear-gradient(135deg,#9667ea,#673ab7)!important;
border: none!important;
border-radius: 50px!important;
margin: 0px auto!important;
color: #fff!important;
font-weight: 400;
transition-duration: .2s;
padding: 12px 20px;
box-shadow: 0 7px 20px #673ab755;
font-size: 14px;
text-align: center;
}
small {
font-family: Shabnam !important;
/* font-size: 80%; */
/* color: white; */
/* background-color: #aeb4d4; */
font-size: 14px;
background: #8658d94d;
width: 250px;
text-align: center;
border-radius: 18px;
font-weight: 400;
padding: 10px;
color: #ffffff;
margin-top: 1px;
box-shadow: 0 5px 20px
#8658d947;
}
#comments .comment-list {
margin: 0;
padding: 0;
list-style: none;
font-size: .9em;
border-radius: 5px;
padding: 20px;
background-color: white;
box-shadow: 2px 2px 14px #0000000f;
}
body.rtl #comments ol.comment-list .children:before {
content: “\21A9”;
left: auto;
right: 0;
/* margin: 20px; */
padding: 8px;
color: #ffffff;
border-radius: 50px;
background-color: #7f5cc1;
box-shadow: 1px 1px 5px #7f5cc1b5;
}
textarea {
background: #f5f5f5;
width: 100%;
padding: 20px!important;
border: 1px solid #ddd;
font-family: IRANSans!important;
font-size: 16px!important;
height: 200px;
resize: vertical;
color: #35495c;
line-height: 32px;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 5px 7px rgba(28,76,156,.1);
}
#comments .comment .comment-body, #comments .pingback .comment-body {
background: #fff;
width: 100%;
margin-top: 15px;
display: table;
padding: 20px;
border-radius: 10px;
box-shadow: 0 5px 7px rgba(28,76,156,.1);
border: 1px solid #efefef;
}
#error-page {
margin-top: 280px;
background-color: #673ab7;
color: white;
/* font-size: 15px; */
padding: 0.2em 2em;
border-radius: 25px;
box-shadow: 3px 3px 15px #00000080;
}
سلام خیلی ممنون از راهنمایی تون واقعا لطف کردید
با تشکر از توضیح جامع آقای حسنی، یه پیشنهاد ساده تر هم این هست که شورت کد رو توی ویجت شورت کد نذارید !
بذاریدش توی یه ویرایشگر متن بعد برید تایپوگرافیش رو عوض کنید
حد اقل با این روش میتونید فونتها و اندازهاش رو به دلخواه تنظیم کنید