Custom pages

Hello,

1) It is possible to add custome content in the empty cart widget?

2) how can I change the content of the empty wishlist and waitlist? or at least change the icon and title

3) how to keep the default thank you page content but change or remove the title “thank you for your order”? I tried making a html block but i couldnt find the order details element

4) how can I customize the order tracking form fields? I want to change the text inside the field and also the description text above the form

Hi agapikaa,

Thanks for reaching to us.

Provide me with the mockup of the styles that you try to achieve and we’ll send proper instructions if it’s possible.

Regards,

i want to be able to change the title, the description and the icon of empty cart widget, empty wishlist and empty waitlist like the photo you see.

for the thank you page, i just want to chagne the default text, and in the order tracking forms i want to change the field title, and the field default text, as well as the title and description

Attachments:

You must be logged in to view attached files.

Hi agapikaa,

+ In order to change / translate words. Please make sure you synced the strings first before changing / translating WooCommerce, WoodMart Core plugins and WoodMart theme. You can refer to article

https://xtemos.com/docs-topic/theme-translation/
https://xtemos.com/docs-topic/how-to-make-woodmart-multilingual-with-wpml/

+ You are also need to select the language for the backend and theme settings for admin from the admin user profile, please edit the user’s profile and then select the language for that user it will show the same on the backend.

+ Some strings related to Wishlist / Compare / Login & Register page, you can change in Theme Settings > Shop or Theme Settings > My account https://prnt.sc/W8Tt95stG3YC

Regards,

but how do i change the icons/images on these pages?

Hi agapikaa,

Please add the below Custom CSS code to Theme Settings > Custom CSS > Global CSS section:

/* Wishlist icon */
p.wd-empty-wishlist:before {
    content: "\f106";
}

/* Cart icon */
p.cart-empty:before {
    content: "\f147";
}

Here is the list of all our theme icons (including Unicode characters):

$wd-icon-warning-sign: \f100;
$wd-icon-twitter-brands: \f154;
$wd-icon-github-brands: \f155;
$wd-icon-pinterest-brands: \f156;
$wd-icon-envelope-solid: \f157;
$wd-icon-linkedin-brands: \f158;
$wd-icon-mobile-alt-solid: \f159;
$wd-icon-location-arrow-solid: \f160;
$wd-icon-youtube-brands: \f162;
$wd-icon-instagram-brands: \f163;
$wd-icon-flickr-brands: \f164;
$wd-icon-tumblr-brands: \f165;
$wd-icon-dribbble-brands: \f166;
$wd-icon-skype-brands: \f167;
$wd-icon-vk-brands: \f168;
$wd-icon-google-brands: \f169;
$wd-icon-behance-brands: \f170;
$wd-icon-spotify-brands: \f171;
$wd-icon-soundcloud-brands: \f172;
$wd-icon-copyright-regular: \f173;
$wd-icon-facebook-square-brands: \f174;
$wd-icon-whatsapp-brands: \f175;
$wd-icon-odnoklassniki-brands: \f176;
$wd-icon-vimeo-v-brands: \f177;
$wd-icon-snapchat-ghost-brands: \f178;
$wd-icon-telegram-brands: \f179;
$wd-icon-facebook-f-brands: \f180;
$wd-icon-viber-brands: \f181;
$wd-icon-play-button: \f101;
$wd-icon-360-deg: \f102;
$wd-icon-comment: \f103;
$wd-icon-paperclip: \f104;
$wd-icon-header-cart: \f105;
$wd-icon-heart: \f106;
$wd-icon-check: \f107;
$wd-icon-door-logout: \f108;
$wd-icon-more-dots: \f109;
$wd-icon-arrow-circle-left: \f110;
$wd-icon-arrow-circle-right: \f111;
$wd-icon-cross-close: \f112;
$wd-icon-chevron-right: \f113;
$wd-icon-chevron-left: \f114;
$wd-icon-chevron-up: \f115;
$wd-icon-edit: \f116;
$wd-icon-social: \f117;
$wd-icon-filter: \f118;
$wd-icon-sort-by: \f119;
$wd-icon-long-arrow-right: \f120;
$wd-icon-long-arrow-left: \f121;
$wd-icon-grid: \f122;
$wd-icon-cart: \f123;
$wd-icon-user: \f124;
$wd-icon-newlatter: \f125;
$wd-icon-bag: \f126;
$wd-icon-scale-arrows: \f127;
$wd-icon-compare: \f128;
$wd-icon-chevron-down: \f129;
$wd-icon-search: \f130;
$wd-icon-quote: \f131;
$wd-icon-envelope-o: \f132;
$wd-icon-tik-tok-brands: \f133;
$wd-icon-account-wishlist: \f134;
$wd-icon-account-details: \f135;
$wd-icon-account-download: \f136;
$wd-icon-account-exit: \f137;
$wd-icon-account-orders: \f138;
$wd-icon-account-address: \f139;
$wd-icon-account-other: \f140;
$wd-icon-ruler: \f13f;
$wd-icon-account-payment: \f142;
$wd-icon-plus: \f143;
$wd-icon-home: \f144;
$wd-icon-blog: \f145;
$wd-icon-shop: \f146;
$wd-icon-cart-empty: \f147;
$wd-icon-star: \f148;
$wd-icon-star-empty: \f149;
$wd-icon-caret-down: \f150;
$wd-icon-caret-up: \f151;
$wd-icon-caret-left: \f152;
$wd-icon-caret-right: \f153;
$wd-icon-menu: \f15a;
$wd-icon-menu-active: \f15b;
$wd-icon-menu-filters: \f15c;

Regards,

so, if i have the image of the icon that i want to change how do i do that?

Hi agapikaa,

Please add the below Custom CSS code to Theme Settings > Custom CSS > Global CSS section:

p.cart-empty {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center; 
    text-align: center; 
    min-height: 150px; 
    padding-top: 110px;
}

p.cart-empty:before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%; 
    transform: translateX(-50%); 
    width: 100px;
    height: 100px;
    background-image: url('https://placehold.co/100x100.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    display: block;
}

You can replace the placeholder URL https://placehold.co/100x100.png with your actual image path. But, I kindly recommend you to useSVG` or Font icons for flexible.

Regards,

[Author]

Posts