The popup function of Elementor still seems to have some minor difficulties, so you have to help yourself here and there. If you want to integrate a simple audio player in the popup, the WordPress own embed code does not work properly. Alternatively, this can be solved with the following script.
<audio controls autoplay>
<source src="datei.mp3" type="audio/mpeg">
Sorry, your browser does not support the audio player.
</audio>
<script>
jQuery(document).ready(function($) {
var delay = 200; setTimeout(function() {
$(‘.elementor-tab-title’).removeClass(‘elementor-active’);
$(‘.elementor-tab-content’).css(‘display’, ‘none’); }, delay);
});
</script>
Unfortunately, there is no integrated function in Elementor that makes it possible to make columns clickable and link them. Besides the plugin solution there is also a manual way.
Solution steps:
1) Create a button or link within this column and insert a link target.
2) Then assign a class to this element or link, e.g. “clickable”.
3) Finally, the following CSS code is added:
.elementor-column.clickable a:after {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 2;
}
.clickable .elementor-widget, .clickable .elementor-widget-wrap {
position: static;
}
Until now Elementor offers a filter only for the portfolio, but not for the blog widget.
Solution: On Github you can find the Elementor Super Cat plugin, which was developed for this very purpose.
jQuery(function($){
$('.yesclick').on('click','.elementor-location-popup a', function(event){
elementorProFrontend.modules.popup.closePopup( {}, event);
});
});
Implementing a sticky header in Elementor is relatively simple.
1. set the complete header element via “movement effects” to sticky “top” and set the offset value to 10.
2. the logo has to be assigned to the class “logo” so that it can be reduced in size.
3. the header element gets an “own CSS” code:
/* Background color turns white when scroll */
.elementor-sticky--effects {
background-color:rgba(255,255,255,1);
transition: all 0.5s ease;
}
/* Change color menu on scroll */
.elementor-sticky--effects .elementor-nav-menu a{
color: #333!important;
transition: all 0.5s ease;
}
/* Logo size normal */
.logo img {
width: auto;
max-height: 120px;
transition: all 0.5s ease;
}
/* Logo size on scroll */
.elementor-sticky--effects .logo img {
max-height: 60px;
width: auto;
}
Currently Elementor still lacks a function that you can give several boxes next to each other the same height or that is oriented to the highest box.
Solution: With some CSS you can fix this problem. First you have to create another section within a section. This section can have e.g. three or four columns. In each column you position the desired content. The CSS class must then be assigned to the inner section.
.equal-height-content {
height: 100%;
display: flex;
}
By default, the address field in the checkout only contains the name “Street” and the default value “Street name and house number”. Especially if you don’t use any other default values in the fields, the whole thing looks very unclean here. In addition, the house number would also have to be entered as the name.
With the following code in the functions.php, you can solve the problem:
add_filter('woocommerce_default_address_fields', function ($address_fields) {
unset($address_fields['address_1']['placeholder'], $address_fields['address_2']['placeholder']);
$address_fields['address_1']['label'] = __('Straße & Hausnummer');
return $address_fields;
});
In the following, the button target of the “Back to Shop” button is changed so that this is returned to the last page. For this, the following change must be made in the cart-empty.php.
if ( wc_get_page_id( 'shop' ) > 0 ) : ?>
<p class="return-to-shop">
<a href="#" onclick="window.history.go(-1); return false;">
<?php _e( 'Zurück', 'woocommerce' ) ?>
</a>
</p>
<?php endif; ?>
Not every theme may display a “Product Details” button in the product overview, which can still be very helpful from the user’s point of view, as not everyone is aware that, for example, the product title displays the corresponding details page after clicking on it.
The following code in functions.php solves this problem:
add_action('woocommerce_after_shop_loop_item', 'add_a_custom_button', 5 );
function add_a_custom_button() {
global $product;
if( $product->is_type('variable') || $product->is_type('grouped') ) return;
echo '<div style="margin-bottom:10px;">
<a class="button custom-button" href="' . esc_attr( $product->get_permalink() ) . '">' . __('Produktdetails') . '</a>
</div>';
}
WooCommerce, thanks to WordPress, offers the possibility to create different user groups. The default user as a Wocommerce customer is Customer. Now, for example, another user group can be created with the same rights, which are then e.g. resellers. If this particular user group should have an additional payment option that “normal” customers cannot see, this can be solved as follows.
Solution: The following script is inserted in the function.php of the theme at the end.
function customer_disable_manager( $available_gateways )
{global $woocommerce;
if ( isset( $available_gateways['hierdiezahlungsart'] ) && current_user_can('customer') ) {
unset( $available_gateways['hierdiezahlungsart'] );
}
return $available_gateways;
}
add_filter( 'woocommerce_available_payment_gateways','customer_disable_manager' );
The name of the shipping method is displayed in the shopping cart, checkout and in the e-mails before the shipping costs. If there is only one shipping method, this presented designation may be superfluous.
Solution: With the following code snippet, which must be inserted in the function.php of the theme, this designation is removed.
add_filter( 'woocommerce_cart_shipping_method_full_label', 'bbloomer_remove_shipping_label', 10, 2 );
function bbloomer_remove_shipping_label($label, $method) {
$new_label = preg_replace( '/^.+:/', '', $label );
return $new_label;
}
To set a minimum order amount for a certain country in the store, the following code snippet helps. In addition, you should add a textual note to inform potential buyers about the minimum order amount in advance.
add_action( 'woocommerce_check_cart_items', 'cw_min_num_products' );
function cw_min_num_products() {
if( is_cart() || is_checkout() ) {
global $woocommerce;
$minimum = 20;
$county = array('DE');
$cart_tot_order = WC()->cart->total;
if( $cart_tot_order < $minimum && in_array( WC()->customer->get_shipping_country(), $county ) ) {
wc_add_notice( sprintf( '<strong>A Minimum order of $%s is required before checking out.</strong>'
. '<br />Current order: $%s.',
$minimum,
$cart_tot_order ),
'error' );
}
}
}
If you use payment services that run automatically (PayPal, Klarna,..), i.e. do not require a manual check, as is the case with prepayment, you would probably like to have the status of the payment automatically set to “Completed”. This is made possible by the following snippet.
add_action( 'woocommerce_payment_complete', 'wpdesk_set_completed_for_paid_orders' );
function wpdesk_set_completed_for_paid_orders( $order_id ) {
$order = wc_get_order( $order_id );
$order->update_status( 'completed' );
}