PS : i only do not know for what the function h() is inserted

Guess this will be enough :

function ava_custom_script(){
?>
<script>
(function($){
	$('#top .product').each(function() {
		var onsale = $(this).find('.onsale'),
		thumb = $(this).find('.woocommerce-LoopProduct-link');
		onsale.appendTo(thumb);
	});
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'ava_custom_script');

Try this for the first snippet:
i found on functions.php the way LinkedIn and WhatsApp was set – so this might be the right way to do it.

function avia_add_tiktok_icon($icons) {
	$icons['tiktok'] = array( 'font' =>'entypo-fontello', 'icon' => 'ue8fa' , 'display_name' => 'TikTok');
	return $icons;
}
add_filter('avf_default_icons','avia_add_tiktok_icon', 10, 1);

i guess – best would be with your page the standard widget area: ava_main_header
because you got a non sticky header.

add_action( 'ava_main_header', 'header_widget_area' );
function header_widget_area() {
  dynamic_sidebar( 'header2' );
}

for header meta you can use:

add_filter( 'avf_execute_avia_meta_header', '__return_true', 10, 1);

add_filter('avf_header_setting_filter', 'avf_header_setting_filter_mod', 9999, 1);
function avf_header_setting_filter_mod($header) {
  $header['header_topbar'] = 'header_topbar_active';
  return $header;
}

add_action( 'avia_meta_header', 'enfold_customization_header2_widget_area' );
function enfold_customization_header2_widget_area() {
  dynamic_sidebar( 'header2' );
}

Then you had to create the custom widget area on widgets named : header2
the setting that the header meta is scrolling you can find on enfold child – header – header behavior: Unstick topbar

there are a lot of hooks to use – if you do not use the top bar – we can use that hook for it: avia_meta_header
there are snippets to activate the top-bar without using the elements ( top navigation, social icons , phone number). Advantage of that hook : it is part of header – you can decide that this area scrolls even if the header main is on sticky mode.

Anyway if you use a widget-area there – you had to adjust the padding-top of main

if you only try to place one or two additional social icons i do prefer the image method – without using font-icons.
Just download a png ( and this could be a colored one too) and register that new icon as above :

function avia_add_custom_social_icon($icons) {
    $icons['TikTok'] = 'tiktok';
    return $icons;
}
add_filter('avf_social_icons_options','avia_add_custom_social_icon', 10, 1);

#top #wrap_all .av-social-link-tiktok a:before{
    content: "";
    width: 30px;
    height: 30px;
    display: inline-block;
    vertical-align: middle;
    background: url(/wp-content/uploads/tiktok.png) no-repeat center center;
    background-size: contain;
}

#top #wrap_all .av-social-link-tiktok:hover a {
  background-color:    /*** … etc. what you like to see on hover-style ***/
}

some of those css settings had to be adjusted where you use them – in the footer they got border-radius and are smaller.

first the existing embedded icon-font on Enfold is named: entypo-fontello
Then – if you place f.e. an icon alb element to your layout and open to edit it you can see :
(click to enlarge:)

If you hover the icons and stay on that icon a while – you can see as tooltip the hexcode.

the t from trumblr is on ue8fa and ue8fb
maybe the ue904 is an older icon of tiktok

and you realy entered the custom class in that input field without the dot !

the custom class is custom-table note that no dot is used

– as mike wrote above.
Many of the users make this mistake. However, the entry is made in the field without the “class point”.

see last hint on : https://kriesi.at/support/topic/change-responsive-behavior-collumns/#post-1352986

Go to each first column in your Layout where you got the image on the right side ( if you only got 1/2 columns ) the reverse order is what you looking for.
then the right column will be on top on responsive case.

the last option there : “individually select position …” is for column-rows with more than 2 columns – you can set then on advanced tab an order-number of the column.

you had to open then each column of the row to set the position.

do you have a pdf program installed on your mobile device?
https://www.carlcare.com/ng/tips-detail/fix-adobe-not-opening-pdf-android/
maybe try to deactivate the addon from adobe – and let open the pdf in the browser itself.

did you choose the setting for it?

ich habe mal im responsiven fall geändert zu:
grid-template-rows: 2fr 1fr 2fr 1fr 2fr 1fr;
damit man mal sieht was möglich ist

Also z.B.:
Siehe hier: https://webers-testseite.de/grid-layout-modul/

Es ist völlig beliebig welche Columns du da in das Layout legst, die Breiten und die Lage werden bestimmt durch das css.
Basis ist immer das Elternelement auf Layout : Grid zu setzen und die Items dann zu benennen.
Damit wir mit Enfold arbeiten können habe ich also die columns zu Items erkoren. Das direkte Elternelement ist aber der : entry-content-wrapper.

Manche Enfold Einstellungen muss ich jedoch per css überschreiben, da es ja Regeln für die Columns gibt etc.
Entscheidendes Aha-Moment ist: ich kann das jetzt schieben wie ich will. Anfänglich habe ich 4Spalten 3Zeilen definiert
Die Weiten kann ich beim Grid Layout mit einer relativen Größe angeben. Die fr-Einheit. fr ist eine Brucheinheit und 1fr ist 1 Teil des verfügbaren Platzes.
Im Responsiven Fall ändere ich das: 3Spalten 6Zeilen
Besonderheit: wenn jetzt in feld2 feld2 auftaucht , dann sind da keine Lücken ( Die Zelle wird dann nur über zwei Breiten gestreckt)

by the way – if it is a common Side Bar – the name you had to enter is exactly what you see on your widgets:

so it is “Sidebar Pages” for pages widgets

f.e.: if you open a page on mobile device e.g. iphone there will be two classes on html tag:
avia_mobile avia-safari