Home › Forums › Legacy Support › Support queries › Styling issues › How to Customize TAKE THIS COURSE button and so on?
- This topic has 18 replies, 3 voices, and was last updated 3 years, 6 months ago by Jackson.
-
AuthorPosts
-
August 30, 2020 at 9:11 am #299367spyboysSpectatorHI, I want to customize TAKE THIS COURSE button to BUY NOW https://imgur.com/ofXCZXD.png and i wanna change that TAKE THIS COURSE section similar to udemy make add to cart button under TAKE THIS COURSE below how can i customize like this https://i.imgur.com/Ggc3JG0.png please guide meAugust 31, 2020 at 4:53 am #299463spyboysSpectatorhello reply meAugust 31, 2020 at 5:14 am #299478DianaParticipantYou actually want to change the text which you can do by using Loco Translate Plugin Share the page URL for styling the button Take this course similarly as Buy Now. We will share custom CSS for thatAugust 31, 2020 at 5:28 am #299487spyboysSpectatorAugust 31, 2020 at 5:30 am #299489spyboysSpectatori want to add add this cart button also under the buy now optionSeptember 1, 2020 at 6:41 am #299793spyboysSpectatorhelloSeptember 1, 2020 at 7:34 am #299799DianaParticipantOkay, wait let me share the code Edited Reply Add this code in wp-admin > Plugins > Editor > Select WPLMS Customizer Plugin >wplms-customizer.php
Please cross check the code from here: http://prntscr.com/u9g0e0add_filter('wplms_course_details_widget','custom_add_second_button',9); function custom_add_second_button($x){ ?> <style> .second_button{ background-color: transparent !important; border: 1px solid #2896a9; color: #0f7c90; } </style> <?php echo '<a class="full button second_button">Second button</a>'; return $x; }
September 1, 2020 at 9:17 am #299833spyboysSpectatorNow the button is appear under the TAKE THIS COURSE section but the button is not working note: when user click the the second button which means add to cart button the product add into the cart, now second button do nothing. Refer this video :: https://youtu.be/WjJke8sOSG4 please guide me.September 2, 2020 at 6:03 am #300061DianaParticipantBut if the "take this course" button does the same thing. Here is my point, then why do you need that second button for that same functionality?September 2, 2020 at 6:20 am #300069spyboysSpectatorlook when user click that add to cart button the product dirctly add to cart i want this feature but take this course is directly redirect to check out page. note ; i want add to cart function sepratelySeptember 3, 2020 at 6:25 am #300330JacksonBlockedHello, First please use this code skip given above : Add this code in wp-admin > Plugins > Editor > Select WPLMS Customizer Plugin >wplms-customizer.php
Now add the bellow css in your appearance->customize->custom css: .single-course .product.woocommerce.add_to_cart_inline {border: none !important;padding:0 !important;} .single-course .product.woocommerce.add_to_cart_inline del,.single-course .product.woocommerce.add_to_cart_inline ins,.single-course .product.woocommerce.add_to_cart_inline span {display:none;} But first please remove code given by @diana Refer: https://prnt.sc/uanxa3 i have replicate same on my local setup, Thanks,add_filter('wplms_take_course_button_html','show_add_to_cart_button_on_take_this_course',99,2); function show_add_to_cart_button_on_take_this_course($html,$course_id){ $product_id = get_post_meta($course_id,'vibe_product',true); $html .= do_shortcode('[add_to_cart id="'.$product_id.'" sku=""]'); return $html; }
September 3, 2020 at 3:27 pm #300531spyboysSpectatorits working and i want customize add to cart button like udemy style https://imgur.com/cfDTgCh.png any custom css for thisSeptember 4, 2020 at 5:47 am #300668spyboysSpectatori want to change https://imgur.com/AcEnaSK.png this button to like this https://imgur.com/cfDTgCh.pngSeptember 4, 2020 at 6:31 am #300687JacksonBlockedHello, Goto appearance>>customize>>custom css and use code given below: #course-pricing a.course_button.full.button { background-color:white !important; border-color:blue !important; border: 1px solid !important; color:blue !important; font-size:15px !important; padding-top:10px !important; padding-bottom:10px !important; } Refer: https://prnt.sc/ubbciu Note: you can change color according to your need Thanks,September 4, 2020 at 9:42 am #300748spyboysSpectatorhi thanks but i need to change add to cart button like this -
AuthorPosts
- The topic ‘How to Customize TAKE THIS COURSE button and so on?’ is closed to new replies.