Hi,

Thank you for the access.

We adjusted the css code in the Quick CSS field and temporarily disable the file compression settings. The cart page should now look exactly the same as the screenshot above. Please make sure to purge the cache before checking the page on mobile view.

This is the updated code in the Quick CSS field.

/* Kreditkartenfeld responsive */
@media screen and (max-width: 767px) {
  .woocommerce table.shop_table thead {
    display: none;
  }

  .woocommerce table.shop_table td {
    display: block;
    text-align: right !important;
    border: 0px;
  }

  .woocommerce table.shop_table td::before {
    content: attr(data-title) ": ";
    font-weight: 700;
    float: left;
  }

  .woocommerce table.shop_table_responsive thead,
  .woocommerce-page table.shop_table_responsive thead {
    display: none;
  }

  .woocommerce table.shop_table_responsive tr td::before,
  .woocommerce-page table.shop_table_responsive tr td::before {
    content: attr(data-title) ": ";
    font-weight: 700;
    float: left;
  }

  .woocommerce table.shop_table_responsive tr td,
  .woocommerce-page table.shop_table_responsive tr td {
    display: block;
    text-align: right !important;
  }

  #top #payment div.form-row {
    padding-left: 0px !important;
  }

  /* Target the Credit Card */
  #stripe-card-element {
    width: 200px !important;
    margin-left: -20px;
  }

  /* Target the Expiry Date */
  .woocommerce-checkout-review-order #stripe-exp-element {
    background: #ffffff !important;
    margin: 5px 0px !important;
    padding: 10px 5px !important;
  }

  /* Target the CVC Code */
  .woocommerce-checkout-review-order #stripe-cvc-element {
    background: #ffffff !important;
    margin: 5px 0px !important;
    padding: 10px 5px !important;
    margin-left: -20px;
  }

  .responsive table.shop_table.cart .product-thumbnail {
    display: block !important;
  }

  .woocommerce .shop_table .woocommerce-cart-form__cart-item td::before {
    display: block;
  }

  .responsive #top table .product-name,
  .responsive #top table .product-price {
    border-color: #c4c4c4;
  }

  .woocommerce-cart-form__cart-item {
    border-bottom: 1px solid;
  }

  .woocommerce .shop_table .woocommerce-cart-form__cart-item .product-price::before,
  .woocommerce .shop_table .woocommerce-cart-form__cart-item .product-name::before {
    display: block;
  }

  .woocommerce .shop_table .woocommerce-cart-form__cart-item.actions::before {
    displaY: none;
  }
}

Best regards,
Ismael

Hi,

Thank you for the update.

The code above is not working because $author_id does not exist. You have to assign a value to that variable or just replace this block..

$nameid= get_the_author_meta( 'ID', $author_id); 
$name= get_the_author_meta( 'display_name', $author_id); 

.. with:

$nameid = get_the_author_meta( 'ID' ); 
$name = get_the_author_meta( 'display_name' ); 

To get the ID of the author and assign it to $author_id, try this code.

$author_id = get_post_field( 'post_author', get_the_ID() );

Best regards,
Ismael

Hey mocreate,

Thank you for the inquiry.

Have you tried using the Featured Image Slider from the Media Elements tab of the builder? You should be able to display a post as a full width slider using this element.

Best regards,
Ismael

Hi,

Thank you for the inquiry.

You may need to manually specify the from address in the contact form’s Content > Backend > Your from address field or use an SMTP plugin to whitelist the messages coming from the contact form. Or use this filter in the functions.php file to apply a default from address to every contact forms.

function avf_change_cf_from() {
    return " (Email address hidden if logged out) ";
}
add_filter('avf_form_from', 'avf_change_cf_from', 10);

To make sure that the WordPress mail is working, please install the Contact Form 7 plugin temporarily, then try to send a test mail.

Best regards,
Ismael

Hey Susanne,

Thank you for the inquiry.

You can convert the category pages to use the masonry element but you have to modify the archives.php file directly. An example of the modification can be found here.

// https://kriesi.at/support/topic/how-to-change-category-tag-archive-etc-pages-to-look-like-avia-masonry-grid/#post-661134

Best regards,
Ismael

Hey Diana,

Thank you for the inquiry.

The second cell has no intrinsic height because it has no content. This works fine on desktop view because the cell inherits the height of the first cell but it is not the case on mobile view. To fix that, you have to specify the height of the second cell manually using css.

@media only screen and (max-width: 767px) {
  /* Add your Mobile Styles here */
  .flex_cell.av_one_half.av-50th5r-6f4695f56b3386194828c3865ebb54be {
    min-height: 50vh;
  }
}

You may need to apply a unique class name or ID to the cell and replace the auto generated element ID above.

Best regards,
Ismael

Hi,

Thank you for the update.

We can see the issue but we are not yet sure what is causing it. The html looks correct and we do not see any kind of errors. Did you install any third party extensions for the shop page? One of the plugins might be adjusting the price for certain products.

Best regards,
Ismael

Hi,

Thank you for the inquiry.

You can use the Table element from the builder and add the icon images directly in the table cells using html.

Example:

<img src="IMAGE URL HERE" class="av-table-img-icon">

You can then use the av-table-img-icon class name to adjust the style of the icon.

.av-table-img-icon {
   width: 36px;
   height: 36px;
   background: yellow;
}

Best regards,
Ismael

Hi,

Thank you for the inquiry.

You can use this css code to adjust the style of the columns containing the icons on mobile view.

@media only screen and (max-width: 767px) {
  /* Add your Mobile Styles here */
  #top #wrap_all .flex_column.av-kzbx94lc-0865b210f7d84bd719b709dfe2b258da, #top #wrap_all .flex_column.av-kzbx3c10-9015bc4b90fe961b12754f30ae1ac4a2 {
    width: 49%;
    float: left;
  }
}

Best regards,
Ismael

Hey Jad,

Thank you for the inquiry.

You can use the is_page conditional function to exclude the other pages and apply the changes to a specific page.

// https://developer.wordpress.org/reference/functions/is_page/

Example:

function avia_modify_post_grid_query_asc( $query ) {
	if(is_page(123)) {
		$query['orderby'] = 'title';
		$query['order'] = 'ASC';
	}

	return $query;
}
add_filter('avia_blog_post_query', 'avia_modify_post_grid_query_asc');

The filter above will only change the query on the page with the ID 123.

Best regards,
Ismael

Hi,

Sorry for the delay. It’s not working correctly because the width of the tabs in the tab section element exceed the width of the browser viewport. We are not yet sure sure why that is happening, so for now, you have to use this css code to control the width of the layout tab on mobile view.

@media only screen and (max-width: 767px) {
  /* Add your Mobile Styles here */
  .avia-section-no-padding .av-layout-tab {
    max-width: 99vw;
  }
}

Best regards,
Ismael

Hey markus-fischer,

Thank you for the inquiry.

You can use this css to adjust the grid row’s Fullwidth Break Point to 1075px.

@media only screen and (max-width: 1075px) {
 .responsive #top #wrap_all .av-break-at-tablet .flex_cell {
    margin: 0;
    margin-bottom: 20px;
    width: 100%;
    display: block;
  }
}

You may need to toggle or temporarily disable the Enfold > Performance > File Compression settings after adding the css.

Best regards,
Ismael

Hi,

You don’t need to modify the shop table or the plugin. Just ask the plugin author if the table emits or triggers a Javascript event after it loads the product items. We can then execute the avia_apply_quant_btn function after that event to create the quantity buttons.

Best regards,
Ismael

Hi,

You should be able to use the property and function to retrieve the duration of the video and pause it on a specific time.

// https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/duration
// https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/pause

Full documentation for the html5 video API is located here.

// https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement

Best regards,
Ismael

Hi,

Thank you for the update.

The theme doesn’t alter the product description in any way as far as we know. You can check the enfold/config-woocommerce/config.php file to view the theme modifications for the shop plugin.

Where can we check the issue? Please provide the product URL in the private field.

Best regards,
Ismael