Hey woogie07,
Thanks for the link to your site, typically if you wanted a call button you would add the tel: link to your menu item and use the button option, but I see that you have a phone number in your topbar and the topbar shows on mobile so would you like a call button there?
If so you could use the shortcode wand to create your button and use it to create a call button shortcode that you can add anywhere to display it, such as the Enfold Theme Options ▸ Header ▸ Extra Elements ▸ Phone Number or small info text field.
So to do this first open a new post and in the block editor select the classic block and in the toolbar select the shortcode wand ▸ Button:

then the standard Advanced Layout Builder button element will open for you to design the button, after you build your button and save the button shortcode will show for you to copy

Then add your button shortcode to this function:

function call_button_shortcode( ){
	echo do_shortcode(" button-shortcode-here ");	
}
add_shortcode( 'call_button', 'call_button_shortcode' );

for my example I used this code:

function call_button_shortcode( ){
	echo do_shortcode("[av_button label='Call Us' icon_select='yes' icon='ue854' font='entypo-fontello' link='manually,tel://555-555-5555' link_target='_blank' size='medium' position='right' label_display='' title_attr='' size-text='' av-desktop-font-size-text='' av-medium-font-size-text='' av-small-font-size-text='' av-mini-font-size-text='' margin='' margin_sync='true' padding='' padding_sync='true' av-desktop-margin='' av-desktop-margin_sync='true' av-desktop-padding='' av-desktop-padding_sync='true' av-medium-margin='' av-medium-margin_sync='true' av-medium-padding='' av-medium-padding_sync='true' av-small-margin='' av-small-margin_sync='true' av-small-padding='' av-small-padding_sync='true' av-mini-margin='' av-mini-margin_sync='true' av-mini-padding='' av-mini-padding_sync='true' color_options='' color='theme-color' custom_bg='#444444' custom_font='#ffffff' btn_color_bg='theme-color' btn_custom_grad_direction='vertical' btn_custom_grad_1='#000000' btn_custom_grad_2='#ffffff' btn_custom_grad_3='' btn_custom_grad_opacity='0.7' btn_custom_bg='#444444' btn_color_bg_hover='theme-color-highlight' btn_custom_bg_hover='#444444' btn_color_font='theme-color' btn_custom_font='#ffffff' btn_color_font_hover='white' btn_custom_font_hover='#ffffff' border='' border_width='' border_width_sync='true' border_color='' border_radius='' border_radius_sync='true' box_shadow='' box_shadow_style='0px,0px,0px,0px' box_shadow_color='' animation='' animation_duration='' animation_custom_bg_color='' animation_z_index_curtain='100' hover_opacity='' sonar_effect_effect='' sonar_effect_color='' sonar_effect_duration='1' sonar_effect_scale='' sonar_effect_opac='0.5' css_position='' css_position_location=',,,' css_position_z_index='' av-desktop-css_position='' av-desktop-css_position_location=',,,' av-desktop-css_position_z_index='' av-medium-css_position='' av-medium-css_position_location=',,,' av-medium-css_position_z_index='' av-small-css_position='' av-small-css_position_location=',,,' av-small-css_position_z_index='' av-mini-css_position='' av-mini-css_position_location=',,,' av-mini-css_position_z_index='' id='' custom_class='' template_class='' av_uid='' sc_version='1.0' admin_preview_bg='']");	
}
add_shortcode( 'call_button', 'call_button_shortcode' );

Then add this to your child theme functions.php, and add the call button shortcode [call_button] to your Phone Number Or Small Info Text field:

This is the result for desktop and mobile:

You can also add this call button shortcode in other places like widgets and your footer.

Best regards,
Mike

Hey ballindigital,

Please try the following in Quick CSS under Enfold->General Styling:

.page-id-145 .avia-mailchimp-form input.button {
    background-color: #f2a900;
    border-color: #f2a900;
}

Best regards,
Rikard

Hi,
I am starting to think we are talking about different things, because pressing a blue button when you go to edit a page is not an issue.
So lets back up, woocommerce products do not use the Advanced Layout Builder by default, they use the WordPress editor, such as the classic editor.
This is the default view of a woocommerce product, it is not the Advanced Layout Builder.

If you use the Advanced Layout Builder to build a product you must manually create the layout with the product elements like this:

Now you can not import products and have the theme convert them into Advanced Layout Builder product pages, you wouls need to manually do this.
I think this is where your confusion is, if you import 500 products from another theme with woocommerce then you will be using the same classic editor, or block editor that you used before.
If you are importing 500 product from a Enfold theme where you manually created each product with the Advanced Layout Builder using the ALB elements, then you would simply press the blue ALB button at the top of the page.

Best regards,
Mike

Hi Andrea,

You can open a new thread using this link, or click this button on the Enfold sub forum: https://imgur.com/a/AnoSPNb

Best regards,
Rikard

Hi B,

I am afraid it is not possible to remove only the time with CSS.

You can simply download pre-built child theme here – https://kriesi.at/documentation/enfold/child-theme/, install and activate it, go to Enfold child theme > Import & Export tab and click “import settings from your parent theme” button. After that your site should look the same as your parent theme.

Then you can go to Appearance > Editor and edit Functions.php file inside your child theme and add the code I posted above :)

Best regards,
Yigit

Hi,
Thanks for the login, the margin of the diagonal border below the button was overlapping the button, I added this css in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field to correct.

#av_section_3 .av-section-color-overlay-wrap .container {
	z-index: 2;
    position: relative;
}

Please clear your browser cache and check.

Best regards,
Mike

Hey,

Please add following code to Quick CSS field in Enfold theme options > General Styling tab

@media only screen and (max-width: 480px) {
.avia-button.av-14b7av-fc5aa60a4df753ad7c839469f33ef344,
.avia-button-wrap.av-14b7av-fc5aa60a4df753ad7c839469f33ef344-wrap {
  float: none;
}
.avia-button-wrap.av-14b7av-fc5aa60a4df753ad7c839469f33ef344-wrap {
  max-width: 210px;
  margin: auto;
}
}

Regards,
Yigit

• This reply was modified 3 years, 3 months ago by Yigit.

Hey idelaydis,

Please try the following in Quick CSS under Enfold->General Styling:

.avia-slideshow-button .avia_loading_icon {
  display: none !important; 
}

Best regards,
Rikard

Hi,
Thanks for the screenshot and the link to your site, please use the shortcode wand
to open the button element and style as you wish, when you save the button the shortcode will show and on the frontend the button will show.

Best regards,
Mike

Hi,

Please try the following in Quick CSS under Enfold->General Styling:

#top div .av-dark-form .input-text, #top div .av-dark-form input[type=email], #top div .av-dark-form input[type=input], #top div .av-dark-form input[type=number], #top div .av-dark-form input[type=password], #top div .av-dark-form input[type=search], #top div .av-dark-form input[type=tel], #top div .av-dark-form input[type=text], #top div .av-dark-form input[type=url], #top div .av-dark-form select, #top div .av-dark-form textarea, div div .av-dark-form .button {
    color: green;
    border-color: red;
}

Best regards,
Rikard

Hey AuroraArcus,
Thank you for your question, for reference for future readers this was the example thread on using the shortcode wand that you are referring to.
Unfortunately, there is not a way to re-edit the shortcode that is created with the shortcode wand, so if you need to adjust the code you will need to re-create the button again.
The alternative is to Enable the Avia Layout Builder Debugger and on a new page create the button with the Advanced Layout Builder button element and then text it on the frontend to see if it fits your needs and adjust to suit, then once you are satisfied copy the shortcode from the debugger widow below the builder window.
Please note that both ways use the same button element builder and both ways generates the same shortcode, so it is just a matter of which way is easier for you to work.
Also note that you could copy element shortcode from any existing page in the debugger window, but if there are multiple elements you will just want to be careful when copying the code.

Best regards,
Mike

Hey lucia llovera mateo,

You can open a new thread by using this link, or by clicking this button on the Enfold support forum: https://imgur.com/a/AnoSPNb

Best regards,
Rikard

Hi,

Thank you for the confirmation.

We may need to access the site in order to test the script further. Please provide the login details in the private field.

To disable the custom quantity buttons, please edit the enfold\config-woocommerce\woocommerce-mod.js file and remove this code around line 94.

avia_apply_quant_btn();

Make sure that file compression is disabled or toggled. You can then adjust the style of the input field using this css code.

#top div .quantity input.qty {
    height: 43px;
    width: 103px;
    display: inline;
    padding: 0px 5px 0px;
    line-height: 41px;
    vertical-align: middle;
    margin: 0;
    text-align: center;
}

Best regards,
Ismael